React ES6 onSubmit（）不起作用

问题描述：

我目前正在使用webpack和babel来构建一个项目。我尝试了很多我能想到的东西，但无论如何onSubmit或onClick函数都无法工作，无论我如何绑定这些函数。这是代码的代码片段。任何人都可以想到任何可能的原因？React ES6 onSubmit（）不起作用

这是代码。我不能（有用地）将它制作成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> 
     ); 
    } 
}

使用JSBIN - [这里]（http://jsbin.com/ cocalexiru /编辑？html，js，输出）是组件的工作版本。它到达'console.log'。 –

嗯，我不知道我的不工作。不管怎样，谢谢你！！ – user3711003

答

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

除此之外，我在本地测试它，它的工作原理。验证您正在使用的React和webpack的版本，以确保存在所有es6功能。

注意：可运行代码片段不起作用，因为表单提交被阻止，因为它的框架被沙盒化。

谢谢，我会再次检查React和webpack的版本。 – user3711003

答

这是一个工作小提琴，将值记录到控制台。你不需要使用refs，只要有可能就应该限制ref的使用。

而是裁判，给表单元素的名称，并使用

e.target.content.value

访问值

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

非常感谢。我不知道为什么，但即使是打印出来的声明也行不通... – user3711003

React ES6 onSubmit（）不起作用

相关推荐