我目前正在学习 React.js，但在使用 jquery 或 ajax 调用将表单中的信息返回到帖子时遇到问题。基本上，表单中包含什么信息，提交后，在

标记中发布数据。

这是我的代码:

var BasicInputBox = React.createClass({ 
 
  render: function() { 
    return ( 
      <div> 
        <label>{this.props.label}</label> 
        <br/> 
        <input type="text" onChange={this.props.valChange} value={ this.props.val} /> 
        <br/> 
      </div> 
    ); 
  } 
}); 
 
var CommentBox = React.createClass({ 
  render: function() { 
    return ( 
      <div> 
        <label>Have a question?</label> 
        <br/> 
        <textarea type="text" onChange={this.props.valChange} value={ this.props.val} /> 
        <br/> 
      </div> 
    ); 
  } 
}); 
 
var SubmitButton = React.createClass({ 
  render: function() { 
    return ( 
      <div> 
        <button type="submit" onClick={this.props.submit}> 
          Submit 
        </button> 
      </div> 
    ); 
  } 
}); 
 
var Contact = React.createClass({ 
  getInitialState: function() { 
    return {} 
  }, 
  submit: function(e) { 
    e.preventDefault() 
 
    console.log(this.state); 
    this.setState({ 
      name: "", 
      email: "", 
      comment: "" 
    }) 
  }, 
 
  nameChange: function(e) { 
    this.setState({ 
      name: e.target.value 
    }) 
  }, 
  emailChange: function(e) { 
    this.setState({ 
      email: e.target.value 
    }) 
  }, 
  commentChange: function(e) { 
    this.setState({ 
      comment: e.target.value 
    }) 
  }, 
 
 
  render: function() { 
    return ( 
      <form> 
        <BasicInputBox label="Name:" valChange={this.nameChange} val={this.state.name}/> 
        <BasicInputBox label="Email:" valChange={this.emailChange} val={this.state.email}/> 
        <CommentBox valChange={this.commentChange} val={this.state.comment}/> 
        <SubmitButton submit={this.submit}/> 
      </form> 
 
    ); 
  } 
}); 
 
React.render( 
  <Contact></Contact>, 
  document.body 
); 

请您参考如下方法:

正如 @BinaryMuse 指出的，这里的问题是您的提交方法并没有真正执行任何提交。您提到您想要执行此操作的方式是通过 AJAX，因此您需要 1) 在页面上包含 jQuery(或 Zepto)，2) 进行 ajax 调用。这是完成第二部分的一种方法:

1) 首先，您实际上不需要将提交方法作为属性提供给提交按钮。当单击表单内的提交按钮时，它将触发表单的 onSubmit 事件，因此您只需在其中附加 this.submit 方法即可。

此外，您实际上并不需要为“提交”按钮创建单独的组件。这种粒度在这里可能不合理，因为您可以用更少的代码行完成同样的事情。因此，我将删除您的 SubmitButton 组件并将您的 Contact 组件渲染函数更新为:

    render: function(){ 
       return ( 
        <form onSubmit={this.submit}> 
          <BasicInputBox label="Name:" valChange={this.nameChange} val={this.state.name}/> 
          <BasicInputBox label="Email:" valChange={this.emailChange} val={this.state.email}/> 
          <CommentBox valChange={this.commentChange} val={this.state.comment}/> 
          <button type="submit">Submit</button> 
        </form> 
      ); 
    } 

2) 接下来您可以通过这种方式更改提交方法，添加 AJAX 调用。根据您要向其发送表单的服务器/API 的详细信息，您可能需要稍微修改 AJAX 调用，但我在这里放置的是一个相当通用的表单，很有可能有效:

submit: function (e){ 
  var self 
 
  e.preventDefault() 
  self = this 
 
  console.log(this.state); 
 
  var data = { 
    name: this.state.name, 
    email: this.state.email, 
    comment: this.state.comment 
  } 
 
  // Submit form via jQuery/AJAX 
  $.ajax({ 
    type: 'POST', 
    url: '/some/url', 
    data: data 
  }) 
  .done(function(data) { 
    self.clearForm() 
  }) 
  .fail(function(jqXhr) { 
    console.log('failed to register'); 
  }); 
 
} 

注意:我还将之前用于清除表单的代码封装在其自己的函数中，如果 AJAX 调用返回成功，则会调用该函数。

我希望这有帮助。我将代码放在 jsFiddle 中，您可以在其中测试一下: https://jsfiddle.net/69z2wepo/9888/