我正在尝试在Component上编写一个(curried?)onChange
事件处理程序,它将接收一个key
参数,该参数将让它知道要更新的状态对象中的哪个键。代码不会编译,说'key' is not defined
。
class App extends Component {
constructor(props) {
super(props);
this.state = {
firstName: null,
lastName: null
}
this.handleChange = this.handleChange.bind(this);
}
handleChange = (key) = (event) => {
console.log(key, event);
}
render() {
return (
<div>
<form>
<input onChange={this.handleChange('firstName')} value={this.state.firstName} />
<input onChange={this.handleChange('lastName')} value={this.state.firstName} />
</form>
{JSON.stringify(this.state, null, 4)}
</div>
);
}
}
答案 0 :(得分:3)
您必须在event
处理程序上同时传递key
和OnChange
。
这样做
<input onChange={this.handleChange.bind(this,'firstName')} value={this.state.firstName} />
而onChange
应为
handleChange = (key, event) => {
console.log(key, event);
}
这将允许传递event
和key
,并且该功能将起作用。
答案 1 :(得分:1)
我认为在您的代码中,您只是忘记在初始化第一个函数名称之后放下箭头函数:
handleChange = (key) = [!!! HERE - should be an arrow !!!] (event) => {
console.log(key, event);
}
尝试使用此:
handleChange = (key) => (event) => {
console.log(key, event);
}
这样,您的第一个具有参数key
的函数将返回另一个具有参数event
的函数。