ajax - React.js 如何从表单获取数据并发布它

Question

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

Answer 1

正如 @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/