CODEWITHSUNDEEP
reactjsformsinputantdreact-props
Freddy.
Freddy.

Reputation: 1745

Antd Forms, get values from custom component?

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;

Edit laughing-morning-rwktl

Upvotes: 2

Views: 7042

Answers (1)

Samuel Akosile
Samuel Akosile

Reputation: 339

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

Expected Result

Upvotes: 2

Related Questions