Как добавить список строк в текстовую область в реагировать, редукс-формы в виде списка? - PullRequest
Новая
       8

Как добавить список строк в текстовую область в реагировать, редукс-формы в виде списка?

0 голосов
/ 29 августа 2018

enter image description here

Я планирую разработать форму, как показано в макете, когда я нажимаю кнопку добавления администратора, она должна взять значение из текстового поля и добавить в текстовую область в виде списка, и когда я отправляю форму, я должен иметь возможность отправить значения текстовой области в виде массива на сервер.

я пробовал это нажмите здесь, чтобы увидеть код перейти к simpleform.js

Я использую для этого избыточную форму, и мне нужно создать одно и то же в нескольких местах в одной и той же форме. Кто-нибудь может подсказать, как это сделать наилучшим образом, когда я могу повторно использовать один и тот же код или компонент в нескольких местах.

1 Ответ

0 голосов
/ 30 августа 2018

Ваша песочница ... после небольшого исправления 

addEmail = (e) => {
  e.preventDefault()

, кажется, добавляет элементы в список (2 списка?), Но пользовательская текстовая область получает массив в качестве значения ...

если вам нужно, чтобы все было правильно для redux-form (я чувствую боль после работы с formik), вы должны использовать <FieldArray /> с пользовательским рендерером.

Я минимально изменил стандартный пример полевых массивов, чтобы заставить работать POC с textarea, прокручиваемым div текста, прокручиваемым списком элементов: 

const renderHobbies = ({ fields, meta: { error } }) => {
  const val = Array.of(fields.getAll()).join('\n '); // docs claim getAll returns an array ;)
  console.log(val);
  return (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push("aaa")}>Add Hobby</button>
    </li>
    <textarea value={val}/> 
    <div style={{ overflowY: "auto", overflowWrap: "break-word", height:50, width:100}}>{val}</div>

    <div style={{ overflowY: "auto", height: 200 }}>
      {fields.map((hobby, index) => (

https://codesandbox.io/s/0m81vzjx3w

Добавление значения из ввода не должно быть проблемой - например, стандартное setState, fields.push (this.state ...)

UX действительно плох (Autodesk?), Если вы знаете, что должен быть один / многострочный мультиселекторный компонент MUI с поиском, добавлением пользовательских значений ...

...