如何将 getFieldDecorator 与 React (function) hooks 一起使用

Question

我正在尝试创建一个简单的 antd 表单，但不知道如何使 getFieldDecorator 与我的 React 函数一起使用。我如何转化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

这个答案是针对 antd 版本 3 的。

您需要用 包装您的组件Form.create，然后该form对象将被注入到您的组件的 props 中。

稍后引用即可：

function FormDrawerButton(props) {
  ...

  const { getFieldDecorator } = props.form;

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

export default Form.create()(FormDrawerButton);

这是我的其他答案中功能组件中表单的代码沙箱示例：