Лучший способ хранить массив входных данных в Redux Form - PullRequest
Новая
       80

Лучший способ хранить массив входных данных в Redux Form

0 голосов
/ 09 июля 2020

У меня есть большой массив имен, таких как ["person1", "person2", ... "person100"]

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

Сначала я начал с такого поля 

<Field
        name="inputField"
        type="text"
        component={renderField}
        label="Person Name"
/>

Внутри компонента renderField я создаю FieldArray и передаю в него ввод . 

<FieldArray props={input} name="persons" component={renderMembers} />

Теперь это работает нормально, но когда я отправляю значения, я получаю следующий результат: 

inputField: "person100"
persons: Array(1)
    0: {person: "person100"}

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

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

Вот и мои компоненты, если это поможет: 


const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} type={type} placeholder={label} />
      {touched && error && <span>{error}</span>}
    </div>
    <FieldArray props={input} name="persons" component={renderMembers} />
  </div>
);

const renderMembers = ({ fields, meta: { error, submitFailed }, value }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({ champion: value })}>
        Add Member
      </button>
      {submitFailed && error && <span>{error}</span>}
    </li>
    {fields.map((member, index) => (
      <li key={index}>
        <p>Champion: {fields.get(index).champion}</p>
        <button
          className="right"
          type="button"
          title="Remove Member"
          onClick={() => fields.remove(index)}
        >
          Remove
        </button>
      </li>
    ))}
  </ul>
);
...