如何将getFieldDecorator与react（function）挂钩一起使用

Question

我试图创建一个简单的antd表单，但不知道如何使getFieldDecorator与我的react函数一起使用。如何将this.props.form转换为react hooks方法？ 这是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对象将被注入到组件的props中。

稍后再参考：

function FormDrawerButton(props) {
  ...

  const { getFieldDecorator } = props.form;

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

export default Form.create()(FormDrawerButton);

这是功能组件from my other answer中表单的代码沙盒示例：

Answer 2

如果使用类组件，则使用const { getFieldDecorator } = this.props.form; 如果使用功能组件，则使用const { getFieldDecorator } = props.form;

因为（这样）用于对象引用，所以类内组件是必需的参考，但功能组件不是必需的。