Предупреждение React-Mobx: компонент меняет неконтролируемый вход - PullRequest
Новая
       6

Предупреждение React-Mobx: компонент меняет неконтролируемый вход

0 голосов
/ 06 июня 2018

Я использую React + TypeScript + Mobx.Я сделал форму с вводом, все работает, но браузер выдает ошибку.Что я делаю не так?

Предупреждение. Компонент изменяет неконтролируемый ввод текста типа для управления.Входные элементы не должны переключаться с неуправляемых на управляемые (или наоборот).Выберите между использованием управляемого или неконтролируемого входного элемента в течение срока службы компонента.

Форма: 

@observer
export class SearchForm extends React.Component {

    @observable
    private _inputText: string;

    submitForm = (event: SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
    }

    render() {
      return (
        <form onSubmit={this.submitForm}>
          <InputField
            value={this._inputText}
            onChange={action((value: string) => this._inputText = value)}
          />
       </form>
    );}}

Ввод: 

interface Props {
  value: string;
  onChange: (inputText: string) => void;
}

@observer
export class InputField extends React.Component<Props> {

  onChange = (event: SyntheticEvent<HTMLInputElement>) => {
  this.props.onChange(event.currentTarget.value);
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.props.value}
          onChange={this.onChange}
        />
     </div>
   );
 }
}

1 Ответ

0 голосов
/ 06 июня 2018

Входы React управляются / не контролируются в зависимости от наличия значения prop на входе.Вы передаете значение проп, но _inputText начинается как undefined.И когда значение ввода начинает неопределенным, React всегда запускает ввод в неконтролируемом режиме.

После ввода ввода _inputText больше не является неопределенным, и вход переключается в контролируемый режим, и вы получаетепредупреждение.

Для вашего случая это просто;просто инициализируйте _inputText пустой строкой: 

@observable
private _inputText: string = '';

Вы также можете настроить <InputField />, чтобы значения неопределенного значения были пустой строкой: 

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.props.value == null ? '' this.props.value}
          onChange={this.onChange}
        />
     </div>
   );
 }
...