ReagingJS form rendering issue

Question

Я изучаю реакцию и у меня проблема с моей формой.

Я получаю сообщение об ошибке с моей консоли, как это 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