类型错误：无法读取未定义的属性"setState" - PokeApi

Question

我正在尝试使用params将输入文本类型中的文本发送到另一个组件。但我得到了下一个错误

类型错误：无法读取未定义的属性"setState">

我认为使用重定向是最好的选择，但我不确定。

export default class SearchBar extends React.Component {

constructor(props) {
super(props);
this.state = {redirect: false , value: ''};
}
setRedirect(event) {
this.setState({
redirect: true,
value: event.target.value
});
};
renderRedirect = () => {
if (this.state.redirect) {
return <Redirect to={{
pathname: `/pokemon/filtered/${this.state.value}`,
}}/>;
}
};
render() {
return (
<form>
<input type="text" value={this.state.value} onChange={this.setRedirect()} />
</form>
);
}
}

Answer 1

你必须在这里犯错误

1. 在onChange的输入行上，您实际上调用了函数，因为您添加了"((">
   您应该这样做：

<input type="text" value={this.state.value} onChange={this.setRedirect} />

第二个原因是，这是一个需要将函数绑定到构造函数上的类的类

constructor(props) {
super(props);
this.state = {redirect: false , value: ''};
this.setRedirect = this.bind.setRedirect(this)
}

或者使用箭头函数来简化因为箭头函数将始终属于调用该函数的对象

Answer 2

1. 在react中绑定事件处理程序的正确方法是

   <button onclick={activateLasers}>

2. 在javascript世界中。默认情况下，this被设置为调用者。参见MDN上的Function.prototype.bind。要将类方法绑定到类，可以执行1。使用公共类字段语法。2.在构造函数中绑定。

参考文献：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
• https://reactjs.org/docs/handling-events.html