У меня возникли проблемы с выяснением того, как передать event.target.value
в мой setState ниже.
Я думал, что первое событие (= event =
) будет передано при закрытии и будет доступно для возврата, но при отладке я получаю неопределенность.
Что сразу добраться до event.target.value
?
class InputElement1CC extends React.Component {
state = {
inputText: "",
historyList: []
};
handleChangeEvent = 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.handleChangeEvent} />
<br />
{this.state.inputText}
<hr />
<br />
<ul>
{this.state.historyList.map(rec => {
return <div>{rec}</div>;
})}
</ul>
</div>
);
}
}
export default InputElement1CC;
Я обновил, чтобы включить полный компонент
Установите значение переменной и используйте эту переменную. Что-то вроде этого:
handleChangeEvent = event => {
const value = event.target.value;
this.setState(
state => ({
inputText: value,
historyList: [...state.historyList, value]
}),
() => console.info("state", this.state)
);
};
Это сработало. Помогает ли нам ES6 в этом? Есть ли способ сделать это, не помещая contant в объем этой внутренней функции?
Как выглядит код, вызывающий
handleChangeEvent
?