Реагировать учебник: onSubmit CommentForm не работает

Question

Учебник: http://facebook.github.io/react/docs/tutorial.html

var CommentForm = React.createClass({ 
    handleSubmit: function(e) { 
     console.log("form submit"); 
     e.preventDefault(); 
     var author = React.findDOMNode(this.refs.author).value.trim(); 
     var text = React.findDOMNode(this.refs.text).value.trim(); 
     if (!text || !author) { 
      return; 
     } 
     this.props.onCommentSubmit({author: author, text: text}); // used in CommentBox (callback when the form is sent) 
     React.findDOMNode(this.refs.author).value = ''; 
     React.findDOMNode(this.refs.text).value = ''; 
     return; 
    }, 
    render: function() { 
     return (
      <div className="commentForm" onSubmit={this.handleSubmit}> 
       {/* IMPORTANT: closing each tag is MANDATORY in JSX. e.g. <br/> VS <br>*/} 
       <input type="text" placeholder="Your name" ref="author" /> 
       <input type="text" placeholder="Say something..." ref="text" /> 
       <input type="submit" value="Post" /> 
      </div> 
     ); 
    } 
}); 

Форма визуализируется, но когда я нажимаю на не отправите ничего не происходит, даже не в console.log.

Answer 1

В примере они используют элемент. Когда входной сигнал, поданный внутри этой формы, запускается, событие onSubmit будет запущено. Это не будет работать для Просто замените <div> с <form> решит проблему :)

... 
 
render: function() { 
 
     return (
 
      <form className="commentForm" onSubmit={this.handleSubmit}> 
 
       {/* IMPORTANT: closing each tag is MANDATORY in JSX. e.g. <br/> VS <br>*/} 
 
       <input type="text" placeholder="Your name" ref="author" /> 
 
       <input type="text" placeholder="Say something..." ref="text" /> 
 
       <input type="submit" value="Post" /> 
 
      </form> 
 
     ); 
 
    }