Question

我正在尝试与ReactJS联系。预期的行为：

在页面加载时显示联系表单
在表单提交上，将数据发送到服务器，删除表单并显示消息

问题：提交表单后，不会显示该消息。表格未删除。

var React = require('react');
var ReactDOM = require('react-dom');

var ContactBox = React.createClass({
  getInitialState: function() {
    return {name: '', message: '', email: '', formSubmitted: false};
  },
  handleContactSubmit: function() {
   // TODO: submit to the server
    this.setState({formSubmitted: true});
  },
  render: function() {
  if (this.state.formSubmitted) {
        return (
            <div className="alert alert-success">
            <p> The form was submitted. </p>
            </div>
        );
    }
    return (
      <div>
        This is the ContactBox
          <ContactForm onContactSubmit={this.handleContactSubmit}/>
      </div>
    );
  }
});


var ContactForm = React.createClass({
  getInitialState: function() {
    return {name: '', message: '', email: '', submitted: false};
  },
  handleNameChange: function(e) {
    this.setState({name: e.target.value});
  },
  handleEmailChange: function(e) {
    this.setState({email: e.target.value});
  },
  handleMessageChange: function(e) {
    this.setState({message: e.target.value});
 },
 handleSubmit: function(e) {
    e.preventDefault();
    var name = this.state.name.trim();
    var email = this.state.email.trim();
    var message = this.state.message.trim();
    if (!name || !email || !message) {
      return;
    }
    // TODO: send request to the server

    this.setState({name: '', email: '', message: '', submitted: true});
  },
  render: function() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group">
            <label htmlFor="email">Email address</label>
            <input type="email" placeholder="Your email address" name="email" className="form-control" id="email" />
        </div>
        <div className="form-group">
            <label htmlFor="name">Name</label>
            <input type="text" placeholder="Your name" name="name" className="form-control" id="name" />
        </div>
        <div className="form-group">
            <label htmlFor="message">Message</label>
            <textarea placeholder="Message" name="message" className="form-control" id="message" />
        </div>

        <input type="submit" value="Submit" className="btn btn-default" />
      </form>
    );
  }
});

ReactDOM.render(
  <ContactBox />,
  document.getElementById('contact-container')
);

Answer 1

这里缺少一些东西。

1）<head>，handleNameChange和handleEmailChange没有连接到相应字段的更改处理程序，因此当涉及handleMessageChange时，它总是计算为false

2）您不能在任何地方调用if (!name || !email || !message)告诉父组件表单已提交，因此永远不会重绘。

有关正常工作的版本，请参阅this fiddle。

Answer 2

在ContactBox中，this.setState({submitted: true});应为this.setState({formSubmitted: true});。

设计ReactJS启用联系表

2 个答案: