Javascript 当不再需要输入字段时，如何让错误消息自动消失？

我正在使用，并试图在

required=true

状态和

required=false

状态之间切换，我注意到一种特殊情况，即当不再需要输入字段时，错误消息不会消失。我不知道为什么antd本身不能处理这种情况

以下是我的工作：

• 输入字段初始化为

  必需

• 我写了一些东西，然后删除，这会显示一条消息“请输入您的用户名”，如图所示
• 然后我单击，

  单击以切换输入字段

  按钮。这会将输入字段状态从

  required=true

  更改为

  required=false

• 但错误信息仍然存在。当不再需要输入字段时，如何让错误消息自动消失

下面是我在codesandbox创建的上述图像的小演示：

代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Form, Input, Button } from 'antd';


class HorizontalLoginForm extends React.Component {

  constructor() {
    super();
    this.state = {
      enable: true
    };

    this.onButtonClick = this.onButtonClick.bind(this);
  }

  onButtonClick() {
    this.setState({
      enable: !this.state.enable
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const {enable} = this.state;

    return (
      <Form layout="inline">
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: this.state.enable, message: 'Please input your username!' }],
          })(
            <Input disabled = {!enable}
            />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={this.onButtonClick}>
            Click to toggle input field
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(HorizontalLoginForm);

ReactDOM.render(<WrappedHorizontalLoginForm />, document.getElementById('container'));

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
从“antd”导入{Form，Input，Button}；
类HorizontalLoginForm扩展了React.Component{
构造函数（）{
超级（）；
此.state={
启用：true
};
this.onButtonClick=this.onButtonClick.bind（this）；
}
onButtonClick（）{
这是我的国家({
启用：！this.state.enable
})
}
render（）{
const{getFieldDecorator}=this.props.form；
const{enable}=this.state；
返回(
{getFieldDecorator（'用户名'{
规则：[{必需：this.state.enable，消息：“请输入您的用户名！”}，
})(
,
)}
单击以切换输入字段
);
}
}
const wrappedhorizontalloginfo=Form.create（{name:'horizontallogin'}）（horizontalloginfo）；
ReactDOM.render（，document.getElementById（'container'））；

似乎无法实现表单的这种行为。Item仅在onInput调用（当您在内部输入内容时）上设置新的验证状态，因此它不考虑“必需”开关

如果您需要更改验证行为，可以使用以下简单解决方案：

{enable ? 
      (<Form.Item>
      {getFieldDecorator('username', {
        rules: [{ required: this.state.enable, message: 'Please input your username!' }],
      })(
        <Input disabled = {!enable}
        />,
      )}
    </Form.Item>) :
   <Form.Item>
     <Input disabled = {!enable} />
   </Form.Item>`}

{启用？
(
{getFieldDecorator（'用户名'{
规则：[{必需：this.state.enable，消息：“请输入您的用户名！”}，
})(
,
)}
) :
`}

---

此解决方案的唯一警告是，更改“启用”开关时，它将隐藏以前输入的值，但您可以将它们保存在您所在州的任何位置，然后将默认输入值分配给此“状态输入值”的值。

沙箱代码是一个带有用户名和密码字段的登录表单。没有“单击以切换输入字段按钮”@AvinKavish抱歉，但我不理解您的评论。@AvinKavish抱歉，已更新。先前粘贴了不正确的链接。您在用户删除其数据时添加了内容，因此现在您需要在单击切换时检查此数据是否存在，如果存在，请将其删除。或者你可以在错误代码中添加一些东西，这样只有禁用为false时才可见？@AriVictor不明白。你能举个例子吗？