Реагировать - получить значение от цели
Я хотел бы получить значение из ввода, но я все еще получаю сообщение «Невозможно прочитать свойство target» of undefined », и я понятия не имею, почему это не работает. Если бы кто-нибудь мог объяснить, я был бы благодарен
import React from "react";
class Search extends React.Component {
constructor(display) {
super(display);
this.state = {
searchingText: ""
};
}
handleChangeEvent(event) {
let searchingText = event.target.value;
this.setState({
searchingText: searchingText
});
if (searchingText.length > 2) {
this.props.onSearch(searchingText);
}
}
handleKeyUp(event) {
if (event.keyCode === 13) {
this.props.onSearch(this.state.searchingText);
}
}
render() {
const styles = {
fontSize: "1.5em",
width: "90%",
maxWidth: "350px"
};
return (
<input
type = "text"
onKeyUp = {this.handleKeyUp}
onChange = {() => this.handleChangeEvent()}
placeholder = "Tutaj wpisz fraze"
style = {styles}
value = {this.state.searchTerm}
/>
);
}
}
экспорт поиска по умолчанию; повторно
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы захотите заменить onChange = {() => this.handleChangeEvent()} на:
onChange = {this.handleChangeEvent}
Первая причина в том, что вы не передаете аргумент this.handleChangeEvent, которым должен быть event.
Кроме того, вы захотите настроить свои функции дескриптора следующим образом, чтобы сохранить контекст this:
Из:
handleChangeEvent(event) {
К:
handleChangeEvent = (event) => {
Причина: стрелочная функция нет своего this, и в этом случае будет ссылаться на класс и сможет получить доступ к props.
Быстрое, но грязное исправление:
onChange = {e => this.handleChangeEvent(e)}
Но это не обязательно и не лучшая практика:
- Здесь не нужно передавать объект
event. - Использование стрелочных функций в свойствах JSX - это плохо, поскольку они будут воссоздаваться при каждом рендеринге этого элемента JSX.
Итак, вы можете использовать функцию просто по ссылке:
onChange = {this.handleChangeEvent}
При таком использовании вы получите объект event в своем методе. Но чтобы использовать контекст this в этом методе, вы должны его привязать. Сделать это можно двумя способами:
В конструкторе
constructor(props) {
super(props);
this.state = {
searchingText: ""
};
this.handleChangeEvent = this.handleChangeEvent.bind( this );
}
Использование стрелочной функции
Вы можете определить свой метод как метод с толстой стрелкой, поскольку они не создают свою лексическую область видимости:
handleChangeEvent = (event) => {
let searchingText = event.target.value;
this.setState({
searchingText: searchingText
});
if (searchingText.length > 2) {
this.props.onSearch(searchingText);
}
}
Привет, чувак. Вы здесь новенькие. Теги имеют краткие сведения об использовании, которые разворачиваются по мере их ввода. Я изменил теги на ваш вопрос, чтобы он не улетучился. Вам все еще нужно улучшить читаемость вашего вопроса.