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

Question

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

有办法实现吗？

Answer 1

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

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

async-validator: ["name is required"] 0: "name is required"

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);