React form's onSubmit not running

react
1

Hey guys,

I’m working on my first meteor project, and ran into some problems…
When submitting the form, the onSubmit function is not running. Any idea why?

This is my code:

GameForm = React.createClass({
  handleSubmit(event) {
    event.preventDefault();
    var author = this.refs.author.value.trim();
    var text = this.refs.text.value.trim();
    if (!text || !author) {
      return;
    }
    console.log("test");
    console.log(author);
    // TODO: send request to the server
    this.refs.author.value = '';
    this.refs.text.value = '';
    return;
  },
  
  /*componentDidMount: function() {
    $('.commentForm').on('submit', this.handleSubmit);
  },*/
  
  render() {
    return (
    <div id="main">
        <div className="form-wrapper">
            <div className="single-page-form-container">
                <div className="container-title" onClick={this.displayLog}>Create Betakey</div>
                <div className="container-content">
                  <form className="commentForm" onSubmit={this.handleSubmit} >
                    <input type="text" placeholder="Your name" ref="author" />
                    <input type="text" placeholder="Say something..." ref="text" />
                    <input type="submit" />
                  </form>
                </div>
            </div>
        </div>
    </div>
    );
  }
});
2

By the way, when I activate the section that’s commented out, it actually works. But I don’t think this work around should be needed…

3

Seems like that should work. I would move the console.log(“test”) to be above the var assignment. The return before the console.log suggests that there is a possibility that it just isn’t resolving any log messages.

If you get a “test” then the function is indeed firing otherwise it’s more of an event binding problem.