Reactjs Antd表单，从自定义组件获取值？

我正在尝试在

getFieldDecorator

中添加一些自定义组件，并在创建时获取添加的值。我不知道该怎么做，因为状态是在自定义组件中找到的。理想情况下，自定义组件将处理所有用户输入值，但不确定如何将这些值作为对象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;

从“React”导入React；
从“antd”导入{图标、模式、表单、输入}；
从“/EditableTagGroup”导入标记；
const Taskform=Form.create（{name:“event_Form”}）（props=>{
const{visible，onCancel，onCreate，form}=props；
const{getFieldDecorator}=form；
常量handleCreate=（）=>{
form.validateFields（（错误，值）=>{
如果（错误）{
返回；
}
form.resetFields（）；
onCreate（值）；
});
};
返回(
{getFieldDecorator（“名称”{
规则：[
{
要求：正确，
消息：“请键入任务的名称！”
}
]
})()}
{getFieldDecorator（“描述”）(
)}
{getFieldDecorator（“标记”）（）}
);
});
导出默认任务表单；

---

我已经在沙盒上检查了您的代码。您可能需要将道具

getFieldDecorator

向下传递到

EditableFormTag.js

，如下所示：

第一步：从

taskform.js

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

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" }}
        />
    )
}

最终结果

---

您是否知道在何处进行更改以将标记视为数组？我假设需要在Taskform中进行更改？由于EditableGroupTag标记已经是arraylet，请让我再次查看代码。我会很快给你回复。我可能需要传递另一个props

setFieldsValue

，同时传递一个alreadt，所以我只需要将getFieldDecorator传递给任何组件，以便将自定义组件链接到表单？是的，兄弟。这就是解决办法。