Как я могу получить сообщение об ошибке автоматически, когда поле ввода больше не требуется?

Question

Я работаю с полем ввода и и пытаюсь переключаться между состоянием required = true и required=false, и я заметил особый случай, когда сообщение об ошибке не исчезает, когда поле ввода больше не требуется. Я не уверен, почему antd сама не справляется с этой ситуацией.

Вот что я делаю:

• Поле ввода инициализируется как required
• Я что-то пишу, а затем стираю, что выдает сообщение «Пожалуйста, введите ваше имя пользователя», как показано на рисунке
• Затем я нажимаю кнопку Click to toggle input field. Это изменяет состояние поля ввода с required = true на required = false.
• Но сообщение об ошибке остается. Как я могу получить сообщение об ошибке автоматически, когда поле ввода больше не требуется?

Вот небольшая демонстрация вышеупомянутого изображения, которое я создал в codeandbox:

Вот также код:

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 внутри), и, следовательно, он не принимает переключатель «required»

В случае, если вам нужно изменить поведение проверки, вы можете воспользоваться простым решением, например:

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

Единственное предостережение этого решения заключается в том, что оно скрываетранее введенное значение при изменении переключателя «enable», но вы можете сохранить их в любом месте вашего состояния, а затем назначить входное значение по умолчанию для значения этого «значения введенного состояния»