我正在尝试将我的React类转换为ES6,但是我在这个过程中遇到了一些困难。我想在构造函数中创建绑定,而不是在渲染视图中。
现在,如果我有一个带有setState的根模块,需要一个参数,例如:
constructor() {
super();
this.state = {
mood: ""
};
this.updateMood(value) = this.updateMood.bind(this,value);
}
updateMood(value) {
this.setState({mood: value});
}
然后我将此函数传递给组件:
<customElement updateMood={this.updateMood}></customElement>
然后在customElement模块中,我有类似的东西:
constructor() {
super();
}
update(e) {
this.props.updateMood(e.target.value);
}
并在渲染中:
<input onChange={this.update} />
这是正确的方法吗?因为我不能让它起作用; - (
答案 0 :(得分:7)
您不能使用此this.updateMood(value) = this.updateMood.bind(this,value);
构造,因为它是语法错误。
您可以像这样解决问题
class CustomElement extends React.Component {
constructor() {
super();
this.update = this.update.bind(this);
}
update(e) {
this.props.updateMood(e.target.value);
}
render() {
return <input onChange={this.update} />
}
}
class Parent extends React.Component {
constructor() {
super();
this.state = {
mood: ""
};
this.updateMood = this.updateMood.bind(this);
}
updateMood(value) {
this.setState({ mood: value });
}
render() {
return <div>
<CustomElement updateMood={this.updateMood}></CustomElement>
<h1>{ this.state.mood }</h1>
</div>
}
}
答案 1 :(得分:0)
或者,根据您的babel设置或使用打字稿,以下内容实现相同,但编写/维护更方便:
$(document).on("keyup", function(e) {
if ($('#tbprofession').is(":focus")) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('I was tabbed!');
} else {
alert('not tabbed');
}
}
});