Реакция: элемент изменяет контролируемый ввод текста на неконтролируемый

Я получаю следующую ошибку, но не могу определить, почему это происходит

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

У меня есть следующие файлы:

  1. Searchbox.js

import React, { Component } from 'react';
    
    class Searchbox extends Component {
    
      // render method
      render() {
        const { value, onChange, onSubmit, children } = this.props
        console.log(value)
        console.log(onChange)
        console.log(onSubmit)
        console.log(children)
        return (
          <section className="search-section">
            <form onSubmit={onSubmit}>
              <input
                type="text"
                className="search-box"
                value={value}
                onChange={onChange}
              />
              <button type="submit">{children}</button>
            </form>
          </section>
        )
      }
    }
    
    export default Searchbox

И файл App.js

import React, { Component } from 'react';
import Searchbox from './components/Searchbox'
//import logo from './logo.svg';
import './App.css';

const DEFAULT_TERM = 'High Fidelity'

class App extends Component {

  // Constructor
  constructor(props) {
    super(props)

    this.state = {
      movie: null,
      searchTerm: DEFAULT_TERM
    }

    this.onSearchSubmit = this.onSearchSubmit.bind(this)
    this.onSearchChange = this.onSearchChange.bind(this)
  }


  // onSearchSubmit method
  onSearchSubmit(e) {
    e.preventDefault()
    console.log("Searching movie with name" + this.status.searchTerm)
  }

  onSearchChange(e){
    console.log(event.target.value)
    this.setState({ searchTerm: event.target.value })
  }

  // render method
  render() {

    const { movie, searchTerm } = this.state

    return (
      <div className="App">
        <Searchbox
          value={searchTerm}
          onChange={this.onSearchChange}
          onSubmit={this.onSearchSubmit}
        >Search
        </Searchbox>
      </div>
    );
  }
}

export default App;

При загрузке все нормально, но когда я набираю что-то в текстовом поле, возникает ошибка.

Какие-либо предложения?


reactjs javascript react-dom event-handling
person MrCujo    schedule 21.04.2017    source источник
comment
Он отлично работает для меня.   -  person Shubham Khatri    schedule 21.04.2017
comment
Просто вставил свой код в codepen и не получил ни предупреждений, ни ошибок.   -  person Michael Jasper    schedule 21.04.2017

Ответы (2)


arrow_upward
4
arrow_downward

Проблема в функции onSearchChange. Вы назвали событие ввода onChange как e, но вы берете значение из глобальной переменной event

Замените onSearchChange кодом, указанным ниже:

onSearchChange(event) {
   this.setState({ searchTerm: event.target.value })
}
person Ritesh Bansal    schedule 21.04.2017
comment
Да брось! Я не могу поверить себе! Я ломал голову в поисках этой проблемы! Предупреждающие сообщения React должны быть более полезными! Большое спасибо Ритеш!! Хороший улов! (у) - person MrCujo; 21.04.2017
comment
Это предупреждение обычно возникает, когда значение, переданное на вход, изменяется с неопределенного на строковое значение или наоборот. - person Ritesh Bansal; 21.04.2017
comment
что, если значение обновляется реквизитом? У меня есть дочерний компонент, значение которого обновляется родительским компонентом через реквизиты, и я получаю именно эту ошибку. - person monkeyjumps; 08.06.2017
comment
Постоянное значение = this.props.value || '' . Передайте это значение входному компоненту. - person Ritesh Bansal; 08.06.2017

arrow_upward
1
arrow_downward

Я получил точно такое же предупреждение. My TextFieldItem — это дочерний компонент, который обновляется через свои реквизиты. Следующая строка была виновником.

const fieldValue = (field.Value == null) ? undefined : field.Value;

при изменении строки установить значение с undefined на ''разрешенное предупреждение.

const fieldValue = (field.Value == null) ? '' : field.Value;

Реагировать компонент

class TextFieldItem extends React.Component{
        constructor(props){
            super(props);
            this.onChange=this.onChange.bind(this);
        }
        onChange(e){
            event.preventDefault();
            const {onFieldChange,field} = this.props;   
            onFieldChange(e.target.id, e.target.value, e.target.name,field.Type);
        }
        render(){        
            const {field, onFieldChange, onRecordUpdate, IsLookupField,record,currentDocumentType} = this.props;       
            const fieldValue = (field.Value == null) ? '' : field.Value;
            return (
                <div>
                    <label>{field.Name}</label> 
                    <input type="text" key={field.Id} className="form-control" id={field.Id} name={field.Name} onChange={this.onChange} value={fieldValue} />     
                    {IsLookupField && <LookupFieldItem record={record} field={field} onRecordUpdate={onRecordUpdate} documentType={currentDocumentType} /> }
                </div>
                );
        }
    }
         export default TextFieldItem;
person monkeyjumps    schedule 08.06.2017