2017-01-09 191 views
2

我目前正在使用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> 
     ); 
    } 
} 
+2

使用JSBIN - [這裏](http://jsbin.com/ cocalexiru /編輯?html,js,輸出)是組件的工作版本。它到達'console.log'。 –

+0

嗯,我不知道我的不工作。不管怎樣,謝謝你!! – user3711003

回答

3

這看起來對我完全有效。但請注意,commentForm不作爲參考文獻存在。

除此之外,我在本地測試它,它的工作原理。驗證您正在使用的React和webpack的版本,以確保存在所有es6功能。

注意:可運行代碼片段不起作用,因爲表單提交被阻止,因爲它的框架被沙盒化。

+0

謝謝,我會再次檢查React和webpack的版本。 – user3711003

3

這是一個工作小提琴,將值記錄到控制檯。 你不需要使用refs,只要有可能就應該限制ref的使用。

而是裁判,給表單元素的名稱,並使用

e.target.content.value 

訪問值

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

+0

非常感謝。我不知道爲什麼,但即使是打印出來的聲明也行不通... – user3711003