Antd Forms，从自定义组件中获取值？

Question

我正在尝试在getFieldDecorator 中添加一些自定义组件并获取添加的 onCreate 值。由于在自定义组件中找到了状态，因此不确定我该怎么做。理想情况下，自定义组件将处理所有用户输入值，但不确定如何将这些值作为对象 onCreate 的一部分传递。

import React from "react";
import { Icon, Modal, Form, Input } from "antd";
import Tags from "./EditableTagGroup";

const Taskform = Form.create({ name: "event_form" })(props => {
  const { visible, onCancel, onCreate, form } = props;
  const { getFieldDecorator } = form;

  const handleCreate = () => {
    form.validateFields((err, values) => {
      if (err) {
        return;
      }

      form.resetFields();
      onCreate(values);
    });
  };

  return (
    <Modal
      visible={visible}
      title="Task"
      closeIcon={
        <Icon
          type="close"
          style={{ fontSize: "14px", fontWeight: "600", marginTop: "30px" }}
        />
      }
      okText="Create"
      onCancel={onCancel}
      onOk={handleCreate}
    >
      <Form layout="vertical">
        <Form.Item label="Name">
          {getFieldDecorator("name", {
            rules: [
              {
                required: true,
                message: "Please type the name of task!"
              }
            ]
          })(<Input placeholder="Write a task name" />)}
        </Form.Item>
        <Form.Item label="Description">
          {getFieldDecorator("description")(
            <Input.TextArea
              style={{ minHeight: "60px" }}
              autoSize={{ minRows: 3, maxRows: 6 }}
              placeholder="Write a description"
            />
          )}
        </Form.Item>
        <Form.Item>{getFieldDecorator("tags")(<Tags />)}</Form.Item>
      </Form>
    </Modal>
  );
});

export default Taskform;

Answer 1

我已经在沙盒上检查了您的代码。您可能需要将道具getFieldDecorator 传递给EditableFormTag.js，如下所示：

第一步：来自taskform.js

<Form.Item><Tags getFieldDecorator={getFieldDecorator} /></Form.Item>

第二步：EditableTagGroup.js内部

const { getFieldDecorator } = this.props;

{inputVisible &&
    <Input
        ref={this.saveInputRef}
        onChange={this.handleInputChange}
        onPressEnter={this.handleInputConfirm}
        value={inputValue}
        onBlur={this.handleInputConfirm}
        type="text"
        size="small"
        style={{ width: 78 }}
    />
}

{getFieldDecorator("tags", {
        initialValue: { tags }
    })(
        <Input
            ref={this.saveInputRef}
            type="text"
            size="small"
            style={{ display: "none" }}
        />
    )
}

最终结果