Question

我正在使用蚂蚁设计表格，我有一个呈现额外字段的组件，问题是我试图在另一个地方使用此组件，但它也在另一个地方显示相同的数据，例如，如果我在一个地方动态添加3个字段，那么另一个地方也会添加3个字段。

我正在使用react.js

  remove = k => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    // We need at least one
    // 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,
    });
  };

const formItems = keys.map((k, index) => {
      const random = Math.random();
      return (
        <React.Fragment key={random}>
          <Card style={{ backgroundColor: '#f2f2f2' }}>
            <Form.Item label="Select MOC"
              key={k + 'select-moc'}
              style={{ display: 'inline-block', width: 'calc(65% - 12px)', marginRight: '10px' }}>
              {getFieldDecorator(k + 'selectMOC', {
                rules: [{ required: true, message: 'Please select MOC' }],
              })(
                <Select initialtValue="Stainless Steel">
                  <Option value="Stainless Steel">Stainless Steel</Option>
                  <Option value="Glass">Glass</Option>
                  <Option value="Teflon">Teflon</Option>
                  <Option value="Plastic">Plastic</Option>
                </Select>
              )}
            </Form.Item>
            <Form.Item label="Recovery (%)"
              key={k + 'recovery'}
              style={{ display: 'inline-block', width: 'calc(25% - 12px)', marginLeft: '10px' }}
              className='input-inLine'
            >
              {getFieldDecorator(k + 'mocRecovery', {
                rules: [{ required: true, message: 'Please input recovery percentage' }],
              })(
                <InputNumber min={0} max={100} />
              )}
              <Icon
                type="close"
                onClick={() => this.remove(k)}
              />
            </Form.Item>
            <p onClick={() => this.add()}
              style={{ width: '50%', margin: '0', marginBottom: '1em', color: 'blue' }}
            >
              Add Another
          </p>
          </Card>
        </React.Fragment>
      );
    });

我希望在2个地方动态添加字段。点击添加MOC按钮应在1个位置添加1个字段，我在2个地方渲染了组件

以蚂蚁设计形式动态添加输入字段的错误

0 个答案: