我想在使用 ant 设计按下按钮后动态添加 2 个文本框，将其存储在数组中，我该如何实现？

Question

我想在使用ant design按下按钮后动态添加2个文本框，如图所示，还删除带有（减号）按钮的文本框，将这些数据存储在数组initialState中，我该如何实现？

https://codesandbox.io/s/blissful-leakey-qzp8o

import ReactDOM from "react-dom";
import "antd/dist/antd.css";    
import { Form, Input, Button } from "antd";

function DualInput({form}) {
  const {getFieldDecorator} = form 
  const initialState = []

  const handleSubmit = (e) => {
    form.validateFieldsAndScroll((err , field) => {           
      initialState.push(field)     
      console.log(initialState)
    }
    )}

    const handleAdd = () => {

    }

    const handleMinus = () => {

    }
  return <div>
    <Form layout="inline" >
    <Form.Item label="Quantity">
  {getFieldDecorator("quantity", {
    rules: []
  })(<Input placeholder="Quantity" size="large" />)}
    </Form.Item>
    <Form.Item label="Price">
      {getFieldDecorator("price", {
        rules: []
      })(<Input placeholder="Price" size="large" />)}
      </Form.Item>
      <Form.Item>
      <Button type="secondary" shape="circle" icon="plus" size="large" onClick={handleAdd}/>
      </Form.Item>
      <Form.Item>
      <Button type="secondary" shape="circle" icon="minus" size="large" onClick={handleMinus}/>
      </Form.Item>
      <Form.Item>
      <Button type="secondary" size="large" onClick={handleSubmit}>Submit</Button>
      </Form.Item>
    </Form>
</div>;
}
const DualInput2 = Form.create()(DualInput);
ReactDOM.render(<DualInput2 />, document.getElementById("container"));

我想得到的数组（样本）：

const initialState = [{Quantity: "100", price: "100"}, {Quantity: "200", price: "200"}]

Answer 1

将此功能组件更改为类组件。并根据需要添加两个条目来更新状态（数组），每次单击添加两个新条目以添加按钮。

通过渲染与数组长度一样多的 formItems，您将获得正确数量的 fromItems。

Answer 2

你有an offical example它是如何完成的。

remove = k => {
  const { form } = this.props;
  // can use data-binding to get
  const keys = form.getFieldValue("keys");
  // We need at least one passenger
  if (keys.length === 1) {
    return;
  }

  // can use data-binding to set
  form.setFieldsValue({
    keys: keys.filter(key => key !== k)
  });
};

add = () => {
  const { form } = this.props;
  // can use data-binding to get
  const keys = form.getFieldValue("keys");
  const nextKeys = keys.concat(id++);
  // can use data-binding to set
  // important! notify form to detect changes
  form.setFieldsValue({
    keys: nextKeys
  });
};