#javascript #reactjs
#javascript #reactjs
Вопрос:
У меня возникли проблемы с пониманием того, как перейти event.target.value
в мой setState ниже.
Я думал, что первое событие ( = event =
) будет передано при закрытии и будет доступно для возврата, но я получаю undefined при отладке этого.
К чему нужно сразу перейти event.target.value
?
class InputElement1CC extends React.Component {
state = {
inputText: "",
historyList: []
};
handleChange = event => {
this.setState(previousState => {
return {
inputText: event.target.value,
historyList: [...previousState.historyList, event.target.value]
};
});
};
render() {
return (
<div>
<a href="/">home</a>
<h1>InputElement1CC - Class Component</h1>
<input placeholder="Enter Some Text" onChange={this.handleChange} />
<br />
{this.state.inputText}
<hr />
<br />
<ul>
{this.state.historyList.map(rec => {
return <div>{rec}</div>;
})}
</ul>
</div>
);
}
}
export default InputElement1CC;
Комментарии:
1. Как выглядит вызываемый код
handleChange
?2. Я обновлен, чтобы включить полный компонент
Ответ №1:
Установите значение переменной и используйте эту переменную. Что-то вроде этого:
handleChange = event => {
const value = event.target.value;
this.setState(
state => ({
inputText: value,
historyList: [...state.historyList, value]
}),
() => console.log("state", this.state)
);
};
Комментарии:
1. Это сработало. ES6 дает нам какую-либо помощь в этом? Есть ли способ сделать это, не вводя contant в область действия этой внутренней функции?
2. Это связано с тем, как React обрабатывает синтетические события. Этим все сказано. Я думаю, если бы вы действительно хотели, вы могли бы использовать
nativeEvent
, как описано здесь .