React.js, как я могу получить данные из своей формы и опубликовать их

В настоящее время я изучаю 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
);

Ответы

Ответ 1

Как @BinaryMuse отметил, что проблема заключается в том, что ваш метод отправки на самом деле не выполняет никаких действий. Вы упомянули, что вы хотите сделать это через AJAX, и поэтому вам нужно: 1) включить jQuery (или Zepto) на свою страницу и 2) сделать вызов ajax. Вот один из способов выполнить вторую часть:

1) Во-первых, вам не нужно предоставлять метод отправки в качестве свойства кнопки отправки. Когда кнопка отправки нажата внутри формы, она вызывает форму в событии Submit, поэтому вы можете просто прикрепить туда метод 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/