Javascript ReactJS表单呈现问题

我正在学习reactjs，我的表格有问题

我从控制台收到如下错误

profile.js:54 Uncaught TypeError:重新加载页面时无法读取未定义的属性“target”。表单没有在我的页面中呈现，但我认为这段代码应该可以工作

my file 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')
  );

var BasicInput=React.createClass({
渲染：函数（）{
返回(
);
}
});
var BasicForm=React.createClass({
getInitialState:函数（）{
返回{
名字：''，
姓氏：“”
};
},
提交：职能（e）{
var-self；
e、 预防默认值（）
self=这个；
console.log（this.state）；
风险值数据={
名字：this.state.firstName，
lastName:this.state.lastName
};
//通过jQuery/AJAX提交表单
$.ajax({
键入：“POST”，
url:“/accounts/profile/details form”，
数据：数据
})
.完成（功能（数据）{
self.clearForm（）
})
.失败（功能（jqXhr）{
console.log（'更改基本信息失败'）；
});
},
clearForm:function（）{
这是我的国家({
名字：“，
姓氏：“
});
},
firstnameChange：函数（e）{
this.setState（{firstName:e.target.value}）；
},
lastnameChange:函数（e）{
this.setState（{lastName:e.target.value}）；
},
render:function（）{
返回(
提交
);
}
});
ReactDOM.render(
,
document.getElementById（'BasicInfo'）
);

这个代码有什么问题

非常感谢您对此问题的帮助。
您应该传递对函数
firstnameChange
和
lastnameChange
的引用，但不要调用它们（从每个函数中删除
（）
）




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

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