如何将 getFieldDecorator 与无状态组件一起使用

Question

Ant Design 库通过使用getFieldDecorator提供表单验证。文档没有提供如何在无状态组件中使用它的示例，我无法找到一种方法来做到这一点。

有没有办法实现这一目标？

Answer 1

这是一个无状态组件的示例，它使用getFieldDecorator, Form.create依赖于组件属性。

填写并清除该字段后，您会注意到警告消息和控制台日志：

异步验证器：[“名称是必需的”] 0：“名称是必需的”

function DynamicRule(props) {
  const { getFieldDecorator } = props.form;
  return (
    <FlexBox>
      <FlexItem>
        <Form.Item label="Name">
          {getFieldDecorator('name', {
            rules: [
              {
                required: true,
                message: 'Please input your name'
              }
            ]
          })(<Input placeholder="Please input your name" />)}
        </Form.Item>
      </FlexItem>
    </FlexBox>
  );
}

export default Form.create()(DynamicRule);