ReactJs将表单数据提交到屏幕

Question

我想要一种在ReactJs中向浏览器提交表单的方法。

var ToDoForm = React.createClass({

    getInitialState: function() {
      return {text: ''};
    },
    handleChange: function(event) {
      this.setState({text: event.target.value});
    },
    handleSubmit: function(e) {
      e.preventDefault();
      return (

            <h2> hey </h2>
      )
    },

    render: function() {
      return (
          <div>
            <h1> todos </h1>

            <form className="todoForm" onSubmit={this.handleSubmit}>
              <input
                  type="text"
                  placeholder="Type out a task"
                  value={this.state.text}
                  onChange={this.handleChange}
                  />
              <input
                  type="submit"
                  value="Submit todo"
                  />
            </form>
          </div>
      );
    }

  });

我有一个功能handleSubmit ，我希望在提交表单时只在浏览器中打印单词hey作为标题2。 我知道这不是很明智或没有任何意义，但我只是想看看它是否有效，然后我将它返回更有意义的内容。 到目前为止，当我单击“提交”按钮时，什么都没有发生。 有什么解决办法吗？

同样值得补充的是这个问题（ 在Reactjs中获取表单数据 ）。 我想要这家伙基本上在做什么，但不是在console.log上将实际打印记录到屏幕上，只是为了澄清我是否不清楚

Answer 1

用状态来处理吗？ 就像是

        getInitialState: function(){

        return{

        submitted: false
        },

        handleSubmit: function(e){
            e.preventDefault();
        this.setState({  subbmitted: true});

        },



       render: function(){

           return (

               <div>
                    <h1> todos </h1>
                   {!!this.state.submitted ?
                  <div>
                     <h2> {'Hey'} </h2>
                 </div>
                 :
                    <form className="todoForm" onSubmit={this.handleSubmit}>
                      <input
                          type="text"
                          placeholder="Type out a task"
                          value={this.state.text}
                          onChange={this.handleChange}
                          />
                      <input
                          type="submit"
                          value="Submit todo"
                          />
                    </form>
                  </div>
)