Я новичок и изучаю React с FreeCodeCamp. В этом вызове говорится:
Когда вы вводите текст в поле ввода, этот текст обрабатывается
handleChangeEvent()
метод, установленный как свойствоinput
в локальном состоянии, и отображается как значение в поле ввода на странице. Компонент состояние является единственным источником истины относительно входных данных.
Я написал это решение:
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
// Change code below this line
this.handleChangeEvent = this.handleChangeEvent.bind(this);
// Change code above this line
}
// Change code below this line
handleChangeEvent(event) {
this.setState({
input: event.target.value
})
}
// Change code above this line
render() {
return (
<div>
{ /* Change code below this line */}
<input value = {this.state.input} onChange = {this.handleChangeEvent()} />
{ /* Change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};
консоль говорит:
«Ошибка сборки, откройте консоль браузера, чтобы узнать больше».
Где я делаю неправильно? я не вижу своей ошибки..
🤔 А знаете ли вы, что...
JavaScript можно использовать для создания видеоигр, как 2D, так и 3D, с использованием библиотеки Three.js.
Вы вызываете handleChangeEvent
вместо того, чтобы передавать его ссылку в качестве реквизита onChange
.
Скорее всего, вам не нужно запускать метод handleChangeEvent в свойстве onChange. Таким образом, вместо этого у вас будет это:
onChange = {this.handleChangeEvent}
Проблема связана с тем, как вы назначаете обработчик событий onChange
.
onChange
ожидает функцию обратного вызова, которая будет запущена при изменении значения ввода. С onChange = {this.handleChangeEvent()}
в вашем посте вы фактически присваиваете undefined
onChange
, поскольку функция handleChangeEvent
обновляет состояние компонента, но ничего не возвращает.
Измените его на onChange = {this.handleChangeEvent}
, чтобы он работал так, как вы ожидаете. При изменении ввода будет вызываться this.handleChangeEvent
и объект event
будет передан в качестве параметра.
Надеюсь, это поможет.