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