Чтобы обновить state с динамическим ключом в React, используй вычисляемые имена свойств из ES6. Эта фишка позволяет использовать переменные или выражения как ключи объекта.
handleInputChange(event) {
this.setState({
[event.target.id]: event.target.value
})
}
Квадратные скобки [event.target.id] вычисляют выражение внутри и используют результат как имя ключа. В этом примере:
event.target.id вычисляется, чтобы получить реальный ключevent.target.value становится соответствующим значениемЭтот синтаксис требует:
Если поле input имеет id="username" и содержит значение "John", код выше установит state как:
{
username: "John"
}
Этот паттерн особенно полезен для:
Этот подход уменьшает дублирование кода и делает твои компоненты более поддерживаемыми при работе с несколькими похожими свойствами state.
Вычисляемые имена свойств в React используют квадратные скобки [expression] для динамического вычисления имени ключа во время выполнения.
Новый — ещё не проверен сообществом
Вы