Создание динамического поля ввода по требованию - PullRequest
Новая
       24

Создание динамического поля ввода по требованию

0 голосов
/ 11 июня 2019

Я новичок в React и занимаюсь персональным проектом, чтобы помочь какой-то организации в моей жизни.

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

Вот что я получаю

NameInput.jsx (компонент) 

import React, { useState } from "react";
import { Form, Label } from "semantic-ui-react";

const NameInput = ({
  input,
  width,
  type,
  placeholder,
  meta: { touched, error }
}) => {
  let [inputs, setInputs] = useState([""]);

  return (
    <div className="nameField">
      <Form.Field error={touched && !!error} width={width}>
        {inputs.map((value, i) => (
          <div>
            <label>Name {i + 1}</label>
            <input {...input} placeholder={placeholder} type={type} />{" "}
            {touched && error && (
              <Label basic color="red">
                {error}
              </Label>
            )}
            {e =>
              setInputs(
                inputs.map((value, j) => {
                  if (i === j) value = e.target.value;
                  return value;
                })
              )
            }
          </div>
        ))}
      </Form.Field>
      <button
        className="ui compact button"
        onClick={() => setInputs(inputs.concat(""))}
      >
        Add Additional Seller
      </button>
    </div>
  );
};

export default NameInput;

И вот как я называю компонент. Это хранит в моей базе данных как nameField 

  <label>Name Field</label>
  <Field
    name="nameField"
    type="text"
    component={NameInput}
    placeholder="Enter Full Name"
  />

В идеале, я бы хотел, чтобы его сохраняли с именами nameField, namefield2, nameField3, но я верю, что смогу решить эту часть самостоятельно, если смогу просто заставить свой компонент играть хорошо.

1 Ответ

0 голосов
/ 11 июня 2019

Разве вы не получали предупреждение о том, что для элементов списка должна быть предоставлена ​​клавиша?

Вы должны назначать уникальную клавишу для каждого входного элемента.

...