javascript - 具有值的行的重复函数

Question

我正在我的应用程序中重新创建此模块。我正在使用 AntDesign。 但我想要它的重复功能并获取已填充的值。

这是我的代码，但它不起作用 Link

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

let id = 0;

class DynamicFieldSet extends React.Component {
  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
    });
  };

  duplicate = k => {
    const { form } = this.props;
    const keys = form.getFieldValue("keys");
    form.setFieldsValue({
      keys: keys.find(key => key === k)
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { keys, names } = values;
        console.log("Received values of form: ", values);
        console.log("Merged values:", keys.map(key => names[key]));
      }
    });
  };

  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    };
    const formItemLayoutWithOutLabel = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 20, offset: 4 }
      }
    };
    getFieldDecorator("keys", { initialValue: [] });
    const keys = getFieldValue("keys");
    const formItems = keys.map((k, index) => (
      <Form.Item
        {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
        label={index === 0 ? "Passengers" : ""}
        required={false}
        key={k}
      >
        {getFieldDecorator(`names[${k}]`, {
          validateTrigger: ["onChange", "onBlur"],
          rules: [
            {
              required: true,
              whitespace: true,
              message: "Please input passenger's name or delete this field."
            }
          ]
        })(
          <Input
            placeholder="passenger name"
            style={{ width: "60%", marginRight: 8 }}
          />
        )}
        {keys.length > 1 ? (
          <div>
            <Icon
              className="dynamic-delete-button"
              type="minus-circle-o"
              onClick={() => this.remove(k)}
            />
            <Icon
              className="dynamic-delete-button"
              type="copy"
              onClick={() => this.duplicate(k)}
            />
          </div>
        ) : null}
      </Form.Item>
    ));
    return (
      <Form onSubmit={this.handleSubmit}>
        {formItems}
        <Form.Item {...formItemLayoutWithOutLabel}>
          <Button type="dashed" onClick={this.add} style={{ width: "60%" }}>
            <Icon type="plus" /> Add field
          </Button>
        </Form.Item>
        <Form.Item {...formItemLayoutWithOutLabel}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedDynamicFieldSet = Form.create({ name: "dynamic_form_item" })(
  DynamicFieldSet
);
ReactDOM.render(
  <WrappedDynamicFieldSet />,
  document.getElementById("container")
);

Answer 1

在您的重复方法中，您可以获得被单击字段的key 或index。表单值中的 keys 数组跟踪您拥有的字段数量及其索引。表单值中的 names 数组跟踪每个字段的值。在您的重复方法中，您需要通过添加到 keys 数组来添加一个字段，然后通过添加到 names 数组来设置该字段的值。方法见下面:

注意:在 add 方法中使用 keys.length 而不是 id 来递增。这将始终保持所有键的唯一性

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

duplicate = k => {
    const { form } = this.props

    // We are using keys to track number of fields
    // and using names to track the value of each field
    const { keys, names } = form.getFieldsValue()

    // We can use the key to access the value of the field for
    // for which the button was clicked
    const nameToDuplicate = names[k]

    /**
     * Add a key to 'keys' array in antd form to render extra field
     * Once the field is rendered we can add the name to the
     * 'names' array of antd form.
     *
     * Note: We add keys first and then add name in callback method because
     * we cannot set a value for a form field before rendering it.
     */
    const newKeys = [...keys, keys.length]

    form.setFieldsValue({ keys: newKeys }, () => {
        const newNames = [...names, nameToDuplicate]
        form.setFieldsValue({ names: newNames })
    })
}

Sandbox Link