Antd Forms, get values from custom component?

Question

I'm trying to add some custom components within getFieldDecorator and obtain the values onCreate added. Not sure how I can go about it since the state is found within the Custom components. Ideally, the custom component will handle all user input value but unsure about how to pass those values as part of the object 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

I have checked your code on sandbox. You may need to pass the props getFieldDecorator down to the EditableFormTag.js like below:

Step one: from the taskform.js

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

Step two: Inside the 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" }}
        />
    )
}

End result