我正在使用AntD在Rails上开发一个react应用程序。我试图使一个表单。列表有三十个项目与四个领域。
我能够通过调整这个[codesandbox示例][1]来制作一个动态添加字段的表单，它工作得很好（在我下面的示例代码中，我把它做成了房间），我可以一次添加一个房间，按钮提供了四个字段来输入房间的信息，然后传递到我的控制器并保存。
问题是我希望它能自动Map30个，并让它们空白，而不是一次添加一个，并让它Map到已经制作的。
现在我只是添加了一个for循环，这样当单击按钮时，它会创建30个项目。
我真的很想知道如何跳过添加按钮，并创建30与它，只是有它自动填充30个项目的领域。
或者我也可以在按钮被按下后，一些代码导致它消失。我找遍了所有的地方，虽然在普通代码中很容易让一个按钮摆脱自己，但我不知道如何从表单中删除一个表单项。据我所知，我不能给予它一个状态，并以visible false的形式操作它。
如果有人能帮我弄清楚如何使一个表单。列表自动有30个项目，或者如何使一个按钮删除本身（或两者兼而有之），我将不胜感激。

<Form layout="horizontal" onFinish={onFinish} size="medium">
  <Form.Item name="building" label="Building">
    <Select>
      <Option>Building 1</Option>
      <Option>Building 2</Option>
    </Select>
  </Form.Item>
    <Form.List name="rooms">
      {(fields, { add, remove }) => {
        return (
          <div>
            {fields.map((field, index) => (
              <Form.Item key={field.key} style={{ marginBottom: "0px" }}>
                <Row gutter={8}>
                  <Col span={6} key={0}>
                    <Form.Item
                      name={[field.name, "room_type"]}
                      fieldKey={[field.fieldKey, "room_type"]}
                    >
                      <Select style={{ marginRight: 8 }}>
                          <Select.Option key={item} value={item}>
                            {item}
                          </Select.Option>
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={6} key={1}>
                    <Form.Item
                      name={[field.name, "square_feet"]}
                      fieldKey={[field.fieldKey, "square_feet"]}
                    >
                        <Input />
                    </Form.Item>
                  </Col>
                  <Col span={6} key={2}>
                    <Form.Item
                      name={[field.name, "bedroom_num"]}
                      fieldKey={[field.fieldKey, "bedroom_num"]}
                      labelCol={{ span: 12 }}
                    >
                      <InputNumber />
                    </Form.Item>
                  </Col>
                  <Col span={6} key={3}>
                    <Form.Item
                      name={[field.name, "bathroom_num"]}
                      fieldKey={[field.fieldKey, "bathroom_num"]}
                    >
                      <Input />
                    </Form.Item>
                  </Col>
                  <Col span={2} key={4}>
                    <MinusCircleOutlined
                      className="dynamic-delete-button"
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  </Col>
                </Row>
              </Form.Item>
            ))}
            <Col span={22} key={2}>
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    for (var i = 0; i < 30; i++) {
                      add();
                    }
                  }}
                >
                  <PlusOutlined /> Add unit number
                </Button>
              </Form.Item>
            </Col>
          </div>
        );
      }}
    </Form.List>
  <Form.Item>
    <Button type="primary" htmlType="submit">
      submit
    </Button>
  </Form.Item>
</Form>

  [1]: https://codesandbox.io/s/antd-reproduction-template-uhu2v?file=/index.js