Question

我是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存储到我的Firebase

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

理想情况下，我希望它保存有nameField，namefield2，nameField3，但是我相信，只要我能使组件正常运行，我就可以自己解决该问题。

Answer 1

您是否从未收到过警告，要求为列表项提供密钥？

您应该为每个输入div分配一个唯一的键。

创建动态按需输入字段

1 个答案: