所以我开始将我的应用程序从ES2015转换为使用React的ES6。
我有一个父类和一个像这样的子类,
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
code: ''
};
}
setCodeChange(newCode) {
this.setState({code: newCode});
}
login() {
if (this.state.code == "") {
// Some functionality
}
}
render() {
return (
<div>
<Child onCodeChange={this.setCodeChange} onLogin={this.login} />
</div>
);
}
}
儿童班,
export default class Child extends Component {
constructor(props) {
super(props);
}
handleCodeChange(e) {
this.props.onCodeChange(e.target.value);
}
login() {
this.props.onLogin();
}
render() {
return (
<div>
<input name="code" onChange={this.handleCodeChange.bind(this)}/>
</div>
<button id="login" onClick={this.login.bind(this)}>
);
}
}
Child.propTypes = {
onCodeChange: React.PropTypes.func,
onLogin: React.PropTypes.func
};
然而,这会导致以下错误,
this.state未定义
指的是,
if (this.state.code == "") {
// Some functionality
}
知道可能导致这种情况的原因吗?
答案 0 :(得分:7)
您可以使用箭头功能绑定您的功能。您需要在子组件和父组件中绑定函数。
<强>父:强>
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
code: ''
};
}
setCodeChange = (newCode) => {
this.setState({code: newCode});
}
login = () => {
if (this.state.code == "") {
// Some functionality
}
}
render() {
return (
<div>
<Child onCodeChange={this.setCodeChange} onLogin={this.login} />
</div>
);
}
}
儿童强>
export default class Child extends Component {
constructor(props) {
super(props);
}
handleCodeChange = (e) => {
this.props.onCodeChange(e.target.value);
}
login = () => {
this.props.onLogin();
}
render() {
return (
<div>
<input name="code" onChange={this.handleCodeChange}/>
</div>
<button id="login" onClick={this.login}>
);
}
}
Child.propTypes = {
onCodeChange: React.PropTypes.func,
onLogin: React.PropTypes.func
};
还有其他方法来绑定函数,例如您正在使用的函数,但您需要为父组件执行此操作<Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)} />
或者您可以在构造函数中将绑定指定为
家长:
constructor(props) {
super(props);
this.state = {
code: ''
};
this.setCodeChange = this.setCodeChange.bind(this);
this.login = this.login.bind(this);
}
儿童强>
constructor(props) {
super(props);
this.handleCodeChange = this.handleCodeChange.bind(this);
this.login = this.login.bind(this);
}
答案 1 :(得分:0)
我同意@Shubham Kathri提供的所有不同解决方案,除了在render中直接绑定。
不建议您直接在render中绑定功能。建议始终将其绑定到构造函数中,因为如果直接在render中绑定,则每当组件渲染时,Webpack都会在捆绑文件中创建一个新的函数/对象,因此Webpack捆绑文件的大小会增加。出于多种原因,您的组件会重新渲染,例如:执行setState,但是如果将其放置在构造函数中,它只会被调用一次。
不建议以下实现
<Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)} />
始终在构造函数中执行此操作,并在需要时使用引用
constructor(props){
super(props);
this.login = this.login.bind(this);
this.setCodeChange = this.setCodeChange.bind(this);
}
<Child onCodeChange={this.setCodeChange} onLogin={this.login} />
如果您使用的是ES6,则不需要手动绑定,但是如果需要的话。如果您想避免与范围相关的问题和手动功能/对象绑定,可以使用箭头功能。
很抱歉,我的手机上有错别字