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

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

0 голосов
/ 25 декабря 2018

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

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 поддерживает, которые не генерируют события, как ожидалось?)

...