Изучаю React по документации, дошел до
раздела с формами и возникло недопонимание: если сохранять значение поля так:
this.setState({value: e.target.value}) - все работает. Но, возвращаясь к разделу
Состояние и жизненный цикл - видим, что рекомендуется обновлять `state` так:
e.persist();
this.setState(state => ({
value: e.target.value
}));
Ок, рекомендуется, не вопрос. При выполнение кода - ошибка
This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.. Иду смотреть указанный раздел. Из всего прочитанного складываются следующие мысли: React возвращает событие не в стандартном виде, а в своем. Чтобы получить стандартное событие, перед обновлением `state` нужно дополнительно вызывать
e.persist(). Вызывал, все заработало.
Вопрос: правильно ли я все понял?
class App extends React.Component {
constructor() {
super();
this.state = {value: 'Hello, world!'}
}
formUpdate = (e) => {
// вариант 1
this.setState({value: e.target.value});
// вариант 2
e.persist();
this.setState(state => ({
value: e.target.value
}));
}
render() {
return (
<div>
<h1>{this.state.value}</h1>
<form>
<label>Новое название:
<input type="text" value={this.state.value} onChange={this.formUpdate}/>
</label>
<button type="submit">Изменить</button>
</form>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
