React ES6 onSubmit() does not work

Question

I'm currently working on a project using webpack and babel to build a project. I tried so many things as I can think of, but somehow onSubmit or onClick function do not work no matter how I bind those functions. Here is the code snippet of the code. Can anyone think of any possible reason?

Here's the code. I can't (usefully) make it a Stack Snippet because they don't allow form submissions.

export default class CommentForm extends React.Component {
    constructor(props) {
        super(props);
        console.log("constructor");
    }

    onSubmit(e) {
        e.preventDefault();
        console.log("you clicked")

        // 1. Take data from from form
        let commentData = {
             // commentName: this.refs.name.value,
             commentBody: this.refs.content.value
        }

        // 2. Pass data back to App
        this.props.addComment(commentData);

        // 3. Reset the form
        this.refs.commentForm.reset();
    }

    render() {
        return (
          <div className="commentForm">
            <form name="comment" id="comment" onSubmit={this.onSubmit.bind(this)}>
              <textarea className="commentText" ref="content" rows="10" placeholder="Comment"></textarea>
              <button id="submit" type="submit">Add Value</button>
            </form>
          </div>
        );
    }
}

Answer 1

This looks completely valid to me. Note, however, that commentForm does not exist as a ref.

Other than that, I tested it locally and it works. Verify the versions of React and webpack you are using to ensure that all es6 capability is present.

NOTE: The runnable snippet won't work as the form submission is blocked since it's frame is sandboxed.

Answer 2

Here is a working fiddle, logging the values to the console. You don't need to use refs and the use of refs should be limited where possible.

Instead of refs, give the form elements a name and use

e.target.content.value

to access the values

https://jsfiddle.net/jq17t7uh/1/