反应 ES6 onSubmit() 不起作用

Question

我目前正在做一个项目，使用 webpack 和 babel 来构建一个项目。我尝试了很多我能想到的东西，但不知何故，无论我如何绑定这些函数，onSubmit 或 onClick 函数都不起作用。这是代码的代码sn-p。谁能想到任何可能的原因？

这是代码。我不能（有用地）将其设为 Stack Snippet，因为它们不允许提交表单。

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

这对我来说看起来完全有效。但是请注意，commentForm 不作为参考存在。

除此之外，我在本地对其进行了测试，并且可以正常工作。验证您使用的 React 和 webpack 的版本，以确保所有 es6 功能都存在。

注意：可运行的 sn-p 将无法工作，因为表单提交被阻止，因为它的框架已被沙盒化。

Answer 2

这是一个工作小提琴，将值记录到控制台。 您不需要使用 refs，并且应尽可能限制 refs 的使用。

代替refs，给表单元素一个名字并使用

e.target.content.value

访问值

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