ReactJS 表单渲染问题答案

【问题标题】：ReactJS form rendering issueReactJS 表单渲染问题
【发布时间】：2016-08-29 09:13:47
【问题描述】：

我正在学习 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')
  );

这段代码有什么问题？

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

【问题讨论】：

标签： javascript jquery ajax reactjs react-jsx

【解决方案1】：

您应该传递对函数 firstnameChange 和 lastnameChange 的引用，但不要调用它们（从每个函数中删除 ()）

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

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

Example

【讨论】：