Question

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

这是代码。我不能（有用）将它变成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功能。

注意：由于表单提交被屏蔽，因此可运行的代码段无法正常工作，因为它的框架是沙盒。

Answer 2

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

代替refs，为表单元素指定名称并使用

e.target.content.value

访问值

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

React ES6 onSubmit（）不起作用

2 个答案: