ajax – React.js如何从我的表单获取数据并发布

发布时间：2020-12-16 01:34:47 所属栏目：百科来源：网络整理

导读：我目前正在学习React.js,并且无法使用jQuery或者ajax调用将表单中的信息返回到一篇文章.基本上,什么信息的形式,在提交后,将标签中的数据发布. 这是我的代码： var BasicInputBox = React.createClass({ render: function() { return ( div label{this.props.

我目前正在学习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)
首先,您不需要将submit方法作为属性提供给submit按钮.当表单中单击提交按钮时,它将触发表单的onSubmit事件,因此您可以在此附加该.submit方法.

此外,您不需要我不想为“提交”按钮创建单独的组件.这样的粒度在这里可能不合理,因为您可以用少得多的代码来完成相同的事情.所以我删除你的SubmitButton组件并更新你的联系人组件渲染功能是：

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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!