我正在尝试创建一个将输入文本打印到屏幕上的组件，这就是我正在做的事情。
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: '' };
}
render() {
return (
<div className="search-bar">
<input value={this.state.term} onChange={event => this.SetState(event.target.value)} />
The value of input is: {this.state.term}
</div>
);
}
}
但是我在 Chrome 控制台中不断收到错误消息：
bundle.js:19818 Uncaught TypeError: _this2.SetState is not a function
有任何想法吗？
谢谢
试试这个：
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: '' };
this.setInputState = this.setInputState.bind(this);
}
setInputState(event) {
this.setState({ term: event.target.value });
}
render() {
return (
<div className="search-bar">
<input value={this.state.term} onChange={this.setInputState} />
The value of input is: {this.state.term}
</div>
);
}
}你必须将 {event => this.SetState(event.target.value)} 函数绑定到这个组件。问题是你的 onChange 函数没有在这个上下文中运行你的组件
代码应该是这样的
const onChange = (event) => { this.setState({term:event.target.value}) }
<input value={this.state.term} onChange={onChange.bind(this) />
我认为你需要绑定你的这个，试试这个（没有双关语）。
render() {
return (
<div className="search-bar">
<input value={this.state.term} onChange={event => this.setState.bind(this, event.target.value)} />
The value of input is: {this.state.term}
</div>
);
}
我相信您必须指定状态中发生了什么变化：
this.setState({ term: event.target.value });
代替
this.setState( event.target.value );