所以我开始将我的应用程序从 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>
);
}
}
child 类,
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
}
知道是什么原因造成的吗?
最佳答案
您可以使用箭头函数来绑定(bind)您的函数。您需要在子组件和父组件中绑定(bind)函数。
父级:
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>
);
}
}
child
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
};
还有其他方法可以绑定(bind)函数,例如您正在使用的方法,但您也需要对父组件执行此操作,如 <Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)} />
或者您可以在构造函数中指定绑定(bind)为
父级:
constructor(props) {
super(props);
this.state = {
code: ''
};
this.setCodeChange = this.setCodeChange.bind(this);
this.login = this.login.bind(this);
}
child
constructor(props) {
super(props);
this.handleCodeChange = this.handleCodeChange.bind(this);
this.login = this.login.bind(this);
}
关于reactjs - 未捕获的类型错误 : Cannot read property 'state or props' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39503559/