Метод не работает должным образом в компоненте на основе класса React.js
Я создал компонент на основе классов в React.js, в котором я создал только один ввод с помощью JSX. Я хотел бы обновить состояние, пока использование записывает в поле ввода, и там поведение, которое я не понял В приведенном ниже коде обратите внимание на реализацию моего метода, обрабатывающего ввод:
class SearchButton extends Component{
constructor(props){
super(props);
this.state = {
searchTerm:""
}
}
handleSearchChange(e){
this.setState({searchTerm:e.target.value})
}
render(){
return(
<div><input value = { this.state.searchTerm } onChange = {this.handleSearchChange} /><br />
{ this.state.searchTerm }
</div>
)
}
}
export default SearchButton;
С помощью приведенного выше кода, когда я ввожу какое-то значение в поле ввода, я получаю следующую ошибку:
bundle.js:19524 Uncaught TypeError: Cannot read property 'setState' of undefined
at handleSearchChange (bundle.js:19524)
Но когда в методе обработки ввода я заменяю handleSearchChange(e){this.setState({searchTerm:e.target.value})} на функцию жирной стрелки, подобную этой handleSearchChange=(e)=>{this.setState({searchTerm:e.target.value})}, все работает хорошо. Это решает мою проблему, но я не знаю почему? Чем отличается функция стрелки от первой реализации?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Когда вы используете стрелочную функцию, =>, используется родительский this.
setState является частью Component, следовательно, принадлежит к родительскому методу handleSearchChange.
Когда вы используете handleSearchChange(e){...}, this относится к текущему методу, поэтому не имеет доступа к setState.
Если вы вынуждены использовать обычный синтаксис функции вместо функции стрелки, вам необходимо привязать метод в конструкторе.
class SearchButton extends Component{
constructor(props){
super(props);
this.state = {
searchTerm:""
}
this.handleSearchChange = this.handleSearchChange.bind(this);
}
handleSearchChange(e){
this.setState({searchTerm:e.target.value})
}
...
В компоненте класса реакции ключевое слово это всегда должно ссылаться на контекст класса. Обычная функция теряет привязку это. стрелочная функция не имеет это и выполняет поиск это в верхнем контексте, который является классом. проверьте Различное объяснение подробно