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. Я знаю, что это не очень мудро или имеет какой-то смысл, но я просто хочу, чтобы он работал, и тогда я верну что-то, что имеет больше смысла. Пока я нажимаю кнопку отправки, ничего не происходит. любые решения?

также стоит добавить, этот вопрос (Get form data in Reactjs). Я хочу, что этот парень в основном делает, но вместо console.logs фактический отпечаток на экране, просто для того, чтобы уточнить, был ли я неясен.

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> 
)