Как использовать getFieldDecorator с реакционными (функциональными) хуками

Question

Я пытаюсь создать простую форму antd, но не знаю, как заставить getFieldDecorator работать с моей функцией реагирования. как я могу перевести this.props.form в подход реагировать хуки? Это синтаксис класса из документации antd.

  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

Answer 1

Вам нужно обернуть ваш компонент с Form.create, тогда объект form будет введен в подпорки вашего компонента.

Просто укажите на него потом:

function FormDrawerButton(props) {
  ...

  const { getFieldDecorator } = props.form;

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

export default Form.create()(FormDrawerButton);

Вот пример кода в песочнице формы в функциональном компоненте из моего другого ответа :