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