ReactJs - 单击按钮时添加组件

Question

我有一个困境，我找不到解决办法。 我想导入许多产品，而它们可能具有相同的类别，所以当我单击“+”时，显示会添加一个类似的行，就像图片一样 我在互联网上看到了很多教程并遵循了它们，但它们都失败了。 我不知道该怎么做。 请帮我！ 非常感谢

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>

代码沙盒！

Answer 1

对于这种形式，我更喜欢使用formik而this.setState 。

解决方案this.setState

我将设计 state 如下

this.state = {
  form: [
    {
      category: "",
      name: "",
      quantity: 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() {
  return (
    <div>
      {this.state.form.map((item, index) => {
        return (
          <div key={index}>
            <div>
              <select value={item.category} onChange={(event) => { this.handleEditFieldOfItem(event, index, 'category'); }}>
                <option value="water">Water</option>
                <option value="food">Food</option>
              </select>
            </div>
            <div>
              <input type="text" value={item.name} onChange={(event) => { this.handleEditFieldOfItem(event, index, 'name'); }} />
            </div>
            <div>
              <input type="text" value={item.quantity} onChange={(event) => { this.handleEditFieldOfItem(event, index, 'quantity'); }} />
            </div>
          </div>
        );
      })}
      <button onClick={this.handleAdd}>Add</button>
    </div>
  );
}

解决方案 2.使用 Formik（带有FieldArray组件）

Formik具有验证、处理嵌套值、...

您应该首先查看Formik 文档。

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>