Question

在提交表单时，我想显示“请稍候......”并成功提交从服务器返回的数据。使用jQuery，很容易做到。但是应该有一种React方式，因为React不喜欢这种直接的DOM操作 - 我想。 1）我是对的吗？ 2）如何在表单提交后显示消息？

var FormComp = React.createClass({

    handleSubmit:function(){

    var userName=this.refs.userName.getDOMNode().value.trim();
    var userEmail= this.refs.userEmail.getDOMNode().value.trim();

    if(!userName || !userEmail){

    return;

    }


    this.props.onFormSubmit({userName:userName, userEmail:userEmail,url:"/api/submit"});

    this.refs.userName.getDOMNode().value='';
    this.refs.userEmail.getDOMNode().value='';

    return;

    },

    render: function() {
    var result=this.props.data;

       return (
        <div className={result}>{result.message}</div>

         <form className="formElem" onSubmit={this.handleSubmit}>
            Name: <input type="text" className="userName" name="userName" ref="userName" /><br/>
            Email: <input type="text" className="userEmail" name="userEmail" ref="userEmail" /><br/>
            <input type="submit" value="Submit" />

         <form >

        </div>


        );
      }
    });


    var RC= React.createClass({

    getInitialState: function() {

     return {data: ""};
      },

    onFormSubmit:function(data){

       $.ajax({
          url: this.props.url,
          dataType: 'json',
          type: 'POST',
          data: data,
          success: function(data) {

            this.setState({data: data});

          }.bind(this),
          error: function(xhr, status, err) {

            console.error(this.props.url, status, err.toString());

          }.bind(this)
        });


    },
    render:function(){

    return <FormComp onFormSubmit={this.onFormSubmit} data={this.state.data}/>
    }
    });

    React.render(
      <RC/>,
      document.getElementById('content')
    );

Answer 1

这绝对是React可以处理的东西，不需要直接的DOM操作。你几乎就在那里，只需要重新整理一下。这是解决这个问题的一种方法（关于重要变化的评论）：

var FormComp = React.createClass({

  // To get rid of those input refs I'm moving those values
  // and the form message into the state
  getInitialState: function() {
    return {
      name: '',
      email: '',
      message: ''
    };
  },

  handleSubmit: function(e) {

    e.preventDefault();

    var userName = this.state.name.trim();
    var userEmail = this.state.email.trim();

    if(!userName || !userEmail) return;

    this.setState({
      name: '',
      email: '',
      message: 'Please wait...'
    });

    // I'm adding a callback to the form submit handler, so you can
    // keep all the state changes in the component.
    this.props.onFormSubmit({
      userName: userName, 
      userEmail: userEmail, 
      url: "/api/submit"
    }, function(data) {
      this.setState({ message: data });
    });
  },

  changeName: function(e) {
    this.setState({
      name: e.target.value
    });
  },

  changeEmail: function(e) {
    this.setState({
      email: e.target.value
    });
  },

  render: function() {
    // the message and the input values are all component state now
    return (
      <div>
        <div className="result">{ this.state.message }</div>
        <form className="formElem" onSubmit={ this.handleSubmit }>
          Name: <input type="text" className="userName" name="userName" value={ this.state.name } onChange={ this.changeName } /><br />
          Email: <input type="text" className="userEmail" name="userEmail" value={ this.state.email } onChange={ this.changeEmail } /><br />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
});


var RC = React.createClass({

  onFormSubmit: function(data, callback){

     $.ajax({
        url: this.props.url,
        dataType: 'json',
        type: 'POST',
        data: data,
        success: callback,
        error: function(xhr, status, err) {

          console.error(this.props.url, status, err.toString());

        }.bind(this)
      });
  },

  render: function() {
    return <FormComp onFormSubmit={this.onFormSubmit} />
  }
});

React.render(
  <RC />,
  document.getElementById('content')
);

react.js - 在表单提交时及之后显示消息

1 个答案: