ReactJS表单呈现问题

Question

我正在学习reactjs，并且我的表单有问题。

当我重新加载我的页面时，我的控制台出现此错误profile.js:54 Uncaught TypeError: Cannot read property 'target' of undefined。窗体不是在我的页面中呈现，但我认为这个代码应该可以工作。

我的文件profile.js：

var BasicInput = React.createClass({ 
    render: function() { 
     return (
      <input type="text" onChange={this.props.valChange} value={ this.props.val} /> 
     ); 
    } 
}); 

var BasicForm = React.createClass({ 
    getInitialState: function(){ 
     return { 
      firstName: '', 
      lastName: '' 
     }; 
    }, 

    submit: function (e){ 
     var self; 

     e.preventDefault() 
     self = this; 

     console.log(this.state); 

     var data = { 
     firstName: this.state.firstName, 
     lastName: this.state.lastName 
     }; 

     // Submit form via jQuery/AJAX 
     $.ajax({ 
     type: 'POST', 
     url: '/accounts/profile/details-form', 
     data: data 
     }) 
     .done(function(data) { 
     self.clearForm() 
     }) 
     .fail(function(jqXhr) { 
     console.log('failed to change basic info'); 
     }); 

    }, 

    clearForm: function() { 
     this.setState({ 
     firstName: "", 
     lastName: "" 
     }); 
    }, 

    firstnameChange: function(e){ 
     this.setState({firstName: e.target.value}); 
    }, 

    lastnameChange: function(e){ 
    this.setState({lastName: e.target.value}); 
    }, 

    render: function() { 
     return (
      <form onSubmit={this.submit}> 
       <div className="form-half"> 
        <BasicInput label="Firstname" valChange={this.firstnameChange()} val={this.state.firstName}/> 
       </div> 
       <div className="form-half"> 
        <BasicInput label="Lastname" valChange={this.lastnameChange()} val={this.state.lastName}/> 
       </div> 
       <button type="submit">Submit</button> 
      </form> 
     ); 
    } 
}); 


ReactDOM.render(
    <BasicForm />, 
    document.getElementById('basicInfoForm') 
); 

什么是错误的代码？

非常感谢您对此问题的帮助。

Answer 1

你应该通过参考功能firstnameChange和lastnameChange但不呼叫他们

<BasicInput 
    label="Firstname" 
    valChange={ this.firstnameChange } 
    val={ this.state.firstName } 
/> 

<BasicInput 
    label="Lastname" 
    valChange={ this.lastnameChange } 
    val={ this.state.lastName } 
/> 

Example