阵营：从儿童组件获取表单值上提交

Question

简历：我有一个由家长组成部分多次使用SignForm组件，我无法想出一个办法，从SignForm通过input values到母部件。

我已经搜索了一下，发现一些类似的问题，但在我的情况下，它不工作：/

---

登录：调用SignForm

class Login extends React.Component { 

    constructor() { 
     //... code 
    } 

    render() { 
     return (
      <SignForm 
       cta='Go' 
       switchSign='Create account' 
       handleSubmit={this._handleSubmit} 
      /> 
     ) 
    } 

    _handleSubmit(username, password) { 
     console.log(username, password); 
     this._validateUser(username, password); 
    } 

    _validateUser(username, password) { 
     //.... 
    } 
} 

父组件SignForm：包含表单标记的子组件

class SignForm extends React.Component { 

    constructor() { 
     super(); 
     var self = this; 
    } 

    render() { 
     return (
      <form className="Form" onSubmit={this._onSubmit.bind(this)}> 
       <div className="Form-body"> 
        <p className="InputSide"> 
         <input id="username" type="text" name="username" ref={(input) => this._username = input}/> 
         <label htmlFor="username">Username</label> 
        </p> 

        <p className="InputSide"> 
         <input id="password" type="pass" name="password" ref={(input) => this._password = input}/> 
         <label htmlFor="password">Password</label> 
        </p> 
       </div> 

       <div className="Form-footer"> 
        <button type="submit" name="sign" className="BtnBasic--lg">{this.props.cta}</button> 
        <Link to="/login" className="Link">{this.props.switchSign}</Link> 
       </div> 
      </form> 

     ) 
    } 

    _onSubmit(e) { 
     e.preventDefault(); 
     console.log(this._username.value, this._password.value); //it logs the input values. 
     self.props.handleSubmit(this._username.value, this._password.value); //error 
    } 
} 

该视图呈现没有问题显示传递给SignForm的道具。问题是在表单上提交：最后一行self.props.handleSubmit(this._username.value, this._password.value);返回一个错误：

"Uncaught TypeError: Cannot read property 'handleSubmit' of undefined(…)"

谢谢。

更新：我找到了解决办法，请查看我answer below

Answer 1

好吧，我找到了解决办法。这是一个this和.bind()丢失：

上SignForm我更换该线路上self：

self.props.handleSubmit(this._username.value, this._password.value);

到this：

this.props.handleSubmit(this._username.value, this._password.value);

2。在Login我加入到这一行.bind(this)：

handleSubmit={this._handleSubmit}

到：

handleSubmit={this._handleSubmit.bind(this)}

---

结论：我需要更加小心使用的this和.bind() 。我希望能帮助那些可能和我有同样问题的人。

Answer 2

如果你有比constructor和组件的生命周期方法之外的其他组件内部的功能（render，componentWillMount，componentDidMount，等...），你会被使用this关键字来访问类的方法或props或state，你需要bindthis。你可以在你的构造函数中这样做。

constructor(props) { 
    super(props); 
    this._handleSubmit = this._handleSubmit.bind(this); 
} 

这样，您不必将其绑定在每一个来电者...

<form onSubmit={this._handleSubmit} />