CODEWITHSUNDEEP
reactjsformsreact-hooksantd
csk87
csk87

Reputation: 199

How to use the getFieldDecorator with react (function) hooks

I am trying to create a simple antd form but dont know how to make the getFieldDecorator to work with my react function. how do i translate this.props.form to the react hooks approach? This is the class syntax from antd documentation. 

  function FormDrawerButton () {

  // ToggleDrawer
  const [visible, setVisible] = useState(false);

  const toggleDrawer = () => {
    setVisible(!visible)
  }

const { getFieldDecorator } = this.props.form; // how to use this?

  return (
    <>
    <Button
      type="primary"
      icon="edit"
      size="large"
      style={{ float: 'right' }}
      onClick={ toggleDrawer }
    >
      Add user
    </Button>
  <div>
    <Drawer
      title="Create a new user"
      width={720}
      onClose={ toggleDrawer }
      visible={ visible }
    >
    <p>Form</p>
    <Form className="login-form">
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />,
          )}
        </Form.Item>
    </Form>
    </Drawer>
  </div>
  </>
  )
}

export default FormDrawerButton

Upvotes: 2

Views: 7769

Answers (2)

Dennis Vash
Dennis Vash

Reputation: 53894

This answer is for version 3 of antd.

You need to wrap your component with Form.create, then the form object will be injected to your component's props.

Just reference it afterward:

function FormDrawerButton(props) {
  ...

  const { getFieldDecorator } = props.form;

  return (
    <>
      ...
    </>
  );
}

export default Form.create()(FormDrawerButton);

Here is code-sandbox example of a form in functional component from my other answer:

Edit Q-58289639-FormFieldValidate

Upvotes: 5

todaysGaurav
todaysGaurav

Reputation: 3

If using class component then useconst { getFieldDecorator } = this.props.form; and if use functional component then use const { getFieldDecorator } = props.form;

because (this.) use for object reference in-class component required reference but functional component not required.

Upvotes: 0

Related Questions