Javascript 当值从反应状态更改时，未在输入字段上触发规则验证

我有一个表单上需要的输入文本字段。当我手动编辑字段并将其设置为空字符串时，验证规则将触发，消息确实会显示。当我通过React state（例如使用按钮）清空字段时，不会触发验证规则。 沙盒是。为完整起见，代码如下所示：

import React from 'react';
import {  Form, Input, Button } from 'antd';


class FormExample extends React.Component {

  constructor(props) {
    super(props);
    this.state = {fields: [{name: 'field-a', value: 42}]}
  }
  
  emptyField = () => {
    this.setState({fields:[{name: 'field-a', value: null}]});
  }
  
  render() {
    const rules = [{ required: true, message: 'the field is required!' }];
      return (
        <>
          <Button onClick={this.emptyField}>emptyField</Button>
          <Form
            name="global_state"
            layout="inline"
            fields={this.state.fields}
          >
            <Form.Item
              label={'The answer is: '}
              name={'field-a'}
              rules={rules}>
              <Input disabled={false}/>
            </Form.Item>
          </Form>
        </>
      );
  }
}


export default FormExample;

从“React”导入React；
从“antd”导入{Form，Input，Button}；
类FormExample扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={fields:[{name:'field-a'，value:42}]}
}
emptyField=（）=>{
this.setState（{fields:[{name:'field-a'，value:null}]}）；
}
render（）{
常量规则=[{required:true，消息：'字段是必需的！'}]；
返回(
空场
);
}
}
导出默认格式示例；

简短回答：

您需要向antd添加一个

validateFields

例如：

this.formRef.current.validateFields（）

---

长答案：

如antd文档中所述，您不应使用

setState

，而应使用

setFieldsValue

您不应该手动调用setState，请使用form.setFieldsValue 以编程方式更改值

下面是一个如何将Form方法与类组件结合使用的示例

例如：

另外，您可以使用

resetFields

，而不是将值设置为

null

例如：

以下是完整的示例：

import React from "react";

import { Form, Input, Button } from "antd";

class FormExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { fields: [{ name: "field-a", value: 42 }] };
  }

  formRef = React.createRef();

  emptyField = () => { 
    // this.formRef.current.setFieldsValue({"field-a": null})
    this.formRef.current.resetFields()
    this.formRef.current.validateFields()
  };

  render() {
    const rules = [{ required: true, message: "the field is required!" }];
    return (
      <>
        <Button onClick={this.emptyField}>emptyField</Button>
        <Form ref={this.formRef} name="global_state" layout="inline" fields={this.state.fields}>
          <Form.Item label={"The answer is: "} name={"field-a"} rules={rules}>
            <Input disabled={false} />
          </Form.Item>
        </Form>
      </>
    );
  }
}

export default FormExample;

从“React”导入React；
从“antd”导入{Form，Input，Button}；
类FormExample扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={fields:[{name:“field-a”，value:42}]}；
}
formRef=React.createRef（）；
emptyField=（）=>{
//this.formRef.current.setFieldsValue（{“field-a”：null}）
this.formRef.current.resetFields（）
this.formRef.current.validateFields（）
};
render（）{
常量规则=[{required:true，消息：“字段是必需的！”}]；
返回(
空场
);
}
}
导出默认格式示例；

by提供了一种我不想遵循的命令式方法，因为我正在使用Redux来存储我的应用程序的状态（尽管对于这个简短、自包含的示例，为了保持简单，我正在使用本地组件状态）。但是，我使用了他回答中提供的

validateFields（）

API，最初如下所示：

componentDidUpdate = (prevProps: any, prevState: any) => {
    this.formRef.current.validateFields();
}

由于某种原因，上面的代码不起作用。然而，下面的代码确实有效，这就是所有必要的。也就是说，字段值直接从Redux存储区传播-没有

重置字段

或

设置字段值

调用

componentDidUpdate = (prevProps: any, prevState: any) => {
    setTimeout(()=>{this.formRef.current.validateFields()}, 0);
}

---

我无法解释为什么上面的代码可以工作，而完全同步版本不能。

我不能接受这个答案，因为它太重要了。在我的真实应用程序中，我使用Redux来存储我的应用程序的状态，在我看来，这种强制方法与Redux模型背道而驰。因为它帮助我找到了正确的答案（）

componentDidUpdate = (prevProps: any, prevState: any) => {
    this.formRef.current.validateFields();
}

componentDidUpdate = (prevProps: any, prevState: any) => {
    setTimeout(()=>{this.formRef.current.validateFields()}, 0);
}