Почему обработка события изменения через родительский элемент не рекомендуется в React?

Я научился всегда передавать обработчики событий изменений непосредственно элементам / компонентам, из которых происходит событие, примерно так:

class MyForm extends Component {
  state = {firstname: '', lastname: '', nickname: ''}

  handleChange = e => setState({[e.target.name]: e.target.value});
  handleSubmit = e => {/* ... */} 

  render(){
    return (<form onSubmit={this.handleSubmit}>
      {Object.entries(this.state).map(([key, value]) => (
        <input 
          key={key} 
          name={key} 
          value={value} 
          onChange={this.handleChange} {/* give handleChange to input */}
        />
      ))}
      <button>Submit</button>
    </form>)    
  }
}

Если я вместо этого хочу использовать функцию публикации событий следующим образом:

class MyForm extends Component {
  state = {firstname: '', lastname: '', nickname: ''}

  handleChange = e => setState({[e.target.name]: e.target.value});
  handleSubmit = e => {/* ... */} 

  render(){
    return (<form 
      onSubmit={this.handleSubmit} 
      onChange={this.handleChange}> {/* give handleChange to form */}
      {Object.entries(this.state).map(([key, value]) => (
        <input 
          key={key} 
          name={key} 
          value={value} 
        />
      ))}
      <button>Submit</button>
    </form>)    
  }
}

... тогда я получу предупреждение:

Предупреждение: Сбой типа проп: Вы указали value опора для поля формы без onChange обработчик. Это сделает поле только для чтения.

Есть ли причина не обрабатывать события изменения через родительский элемент? (Например, есть ли еще браузеры, которые React поддерживает, которые не генерируют события, как ожидалось?)

0 ответов

Другие вопросы по тегам