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

Question

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

有没有办法做到这一点？

标签： javascriptreactjsantd

Answer 1

这是一个使用, 依赖于组件属性的无状态组件的示例。getFieldDecoratorForm.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);