У меня есть массив объектов в виде состояния:
users: [
{
label: "user 1",
value: "user_1"
},
{
label: "user 2",
value: "user_2"
},
]
, и у меня есть входные данные выбора следующим образом:
<Input type="select" name="user" id="user" value={this.state.userValue} onChange={this.handleChange}>
<option value="">-----</option>
{ this.state.users.map((user, index)=>
<option value={user.value} key={index}>{user.label}</option>
)}
</Input>
Теперь проблема возникает с обработчиком событий, как в функция handleChange
, объектом события является SyntheticEvent
. Я обнаружил аналогичные проблемы с радиовходами и выпадающими списками, и типичным решением является передача второго атрибута для учета данных (например, handleChange = (e, data) => { ...
все же data
также возвращается как неопределенное, когда я пытался консоль зарегистрировать его!
обновление 1: я попытался e.persist (), и возвращение не определено. Функция дескриптора в основном выглядит следующим образом:
handleChange = (e) => {
console.log(e.persist())
// this.setState({
// userValue: e.target.value
// }
// );
};
изменение состояния прокомментировано только для предотвращения ошибки при возврате событие не определено.
обновление 2: ссылка в песочнице: https://codesandbox.io/s/lucid-sound-3u7xk