Javascript ReactJs-单击按钮时添加组件

我进退两难，找不到解决办法。我想导入许多产品，但它们可能具有相同的类别，因此当我单击“+”时，显示屏将添加类似于图片的类似行 我在网上看过很多教程，也跟着学过，但都失败了。我不知道怎么做。请帮帮我！多谢各位

state = {
  listItems: [],
  userInput: this.need,
}

need = {
  category: "",
  name: "",
  quantity: ""
}
    handleChange = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        let userInput = { ...this.state.userInput };
        userInput[name] = value;
        this.setState({ userInput });
    }
    submitHandler = e => {
        e.preventDefault()
        this.setState({
            listItems: [...this.state.listItems, this.state.userInput],
        })
    }
<Form>
<Form.Group id="need">
    <Row>
     <Col md="3">
       <label>Category</label>
       <select name="category" className="form-control" onChange={this.handleChange}>
         <option value="1">Water</option>
         <option value="2">Food</option>
       </select>
    </Col>
    <Col md="4">
      <label>Name</label>
        <Input
           name="name"
           className="form-control-alternative"
           onChange={this.handleChange}
           type="text"
         />
    </Col>
    <Col md="4">
      <label>Quantity</label>
      <Input
        name="quantity"
        className="form-control-alternative"
        type="text"
        onChange={this.handleChange}
      />
   </Col>
   <Col>
<i style={{ marginTop: 45 }} onClick={submitHandler} >Add more</i>
   </Col>
</Row>
</Form.Group>
</Form>

状态={
列表项：[]，
userInput:this.need，
}
需要={
类别：“，
姓名：“，
数量：“
}
handleChange=（事件）=>{
const target=event.target；
常量值=target.value；
const name=target.name；
让userInput={…this.state.userInput}；
用户输入[名称]=值；
this.setState（{userInput}）；
}
submitHandler=e=>{
e、 预防默认值（）
这是我的国家({
listItems:[…this.state.listItems，this.state.userInput]，
})
}
类别
水
食物
名称
量
添加更多

---

!

对于这种形式，我更喜欢使用to

this.setState

解决方案1。

this.setState

我会设计如下状态

this.state={
表格：[
{
类别：“，
姓名：“，
数量：0，
},
],
};

和添加更多项目的方法，编辑其内容

handleAdd = () => {
  this.setState({
    form: [
      ...this.state.form,
      {
        category: "",
        name: "",
        quantity: 0,
      },
    ]
  });
};

handleEditFieldOfItem = (event, itemIndex, fieldName) => {
  const value = event.target.value;
  this.setState({
    form: this.state.form.map((item, index) => {
      if (index === itemIndex) {
        return { ...item, [fieldName]: value };
      }
      return item;
    })
  });
};

我会将这些项目呈现如下：

render（）{
返回(
{this.state.form.map（（项，索引）=>{
返回(
{this.handleEditFieldOfItem（事件、索引、“类别”）；}>
水
食物
{this.handleEditFieldOfItem（事件，索引，'name'）；}/>
{this.handleEditFieldOfItem（事件、索引、“数量”）；}/>
);
})}
添加
);
}

解决方案2。使用Formik（带

FieldArray

组件）

Formik

具有验证、处理嵌套值等功能

你应该先退房

从“Formik”导入{Formik，Field，FieldArray}；
// ...
{
// 
}}
>
{（formikProps）=>{
常量{values，handleSubmit}=formikProps；
返回(
{（阵列帮助）=>{
返回(
{values.form.map（（项，索引）=>{
返回(
水
食物
);
})}
arrayHelpers.push（{类别：“”，名称：“”，数量：0}）}>Add
)}}
提交
);
}}

我没弄明白。我检查你的沙箱。然后，我填写字段并单击添加更多，什么也没发生。期望的行为是什么？在显示中，我有一个带有3个标记的表单：选项，2个输入（我称之为表单1）。当我单击“添加更多”时，我想在下面的屏幕上显示一个以上的form1。在我上传的图片中，当加载页面时，只有一行，但当我单击+/添加更多时，它将显示一个类似的行，因此我有两行。我想问每个人我该怎么做ảmơn bạn nhiềU孟春碧ết Formik nhưng chỉ sử Dụngở Mứcơbả新罕布什尔州ờ Bạn mámình biế蒂姆·查查德·福米克

import { Formik, Field, FieldArray } from "formik";

// ...

<Formik
  initialValues={{
    form: [
      {
        category: "",
        name: "",
        quantity: 0
      }
    ]
  }}
  onSubmit={(values, helpers) => {
    // 
  }}
>
  {(formikProps) => {
    const { values, handleSubmit } = formikProps;
    return (
      <>
        <FieldArray name="form">
          {(arrayHelpers) => {
            return (
              <div>
                {values.form.map((item, index) => {
                  return (
                    <div key={index}>
                      <Field as="select" name={`form.${index}.category`}>
                        <option value="water">Water</option>
                        <option value="food">Food</option>
                      </Field>
                      <Field name={`form.${index}.name`} />
                      <Field name={`form.${index}.quantity`} />
                    </div>
                  );
                })}
                <div>
                  <button onClick={() => arrayHelpers.push({ category: '', name: '', quantity: 0 })}>Add</button>
                </div>
              </div>
            )}}
        </FieldArray>
        <button type="submit">Submit</button>
      </>
    );
  }}
</Formik>