Antd Forms, get values from custom component? - reactjs

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