因此,我开始将应用程序从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 }
知道是什么原因造成的吗?
您可以使用箭头功能来绑定您的功能。您需要在子组件和父组件中都绑定功能。
上级:
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)} />
<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); }