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

Question

我正在使用 antd input field并尝试在 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'));

Answer 1

看起来没有办法实现这种行为，因为 Form.Item 仅在 onInput 调用时设置新的验证状态(当您在 Input 中输入内容时)，因此它不采用“必需”开关考虑在内。

如果您需要更改验证行为，您可以使用一个简单的解决方案，例如:

{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>`}

此解决方案唯一需要注意的是，它会在更改“启用”开关时隐藏先前输入的值，但您可以将它们保存在您状态的任何位置，然后将默认输入值分配给此“已输入状态”的值值'