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