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

Question

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

有没有办法做到这一点？

Answer 1

这里是使用getFieldDecorator的无状态组件的example， Form.create依赖于组件属性。

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

  

async-validator：[“必须输入名称”] 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);