React JS - Prop重定向到ES6後undefined

我不能爲我的生活弄清楚下面的代碼有什麼問題，當用戶通過BugAdd窗體添加一個bug時，值被傳遞給handleSubmit功能，反過來應該通過它的道具addBug。但是，當我提交表單時，我看到'console.log（「Adding bug：」，bug）;'React JS - Prop重定向到ES6後undefined

但之後，我收到「react.min.js：14未捕獲的類型錯誤：無法讀取未定義的屬性'錯誤'，我最初的想法是，我可能錯過了某處的.bind。

任何人能發現我的代碼的問題，這是工作的罰款重構到ES6

class BugAdd extends React.Component { 
    render() { 
    console.log("Rendering BugAdd"); 
    return (
     <div> 
     <form name="bugAdd"> 
      <input type="text" name="owner" placeholder="Owner" /> 
      <input type="text" name="title" placeholder="Title" /> 
      <button onClick={this.handleSubmit.bind(this)}>Add Bug</button> 
     </form> 
     </div> 
    ) 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    var form = document.forms.bugAdd; 
    this.props.addBug({owner: form.owner.value, title: form.title.value, status: 'New', priority: 'P1'}); 
    // clear the form for the next input 
    form.owner.value = ""; form.title.value = ""; 
    } 
} 

class BugList extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     bugs: bugData 
    } 
    } 

    render() { 
    console.log("Rendering bug list, num items:", this.state.bugs.length); 
    return (
     <div> 
     <h1>Bug Tracker</h1> 
     <BugFilter /> 
     <hr /> 
     <BugTable bugs={this.state.bugs} /> 
     <BugAdd addBug={this.addBug} /> 
     </div> 
    ) 
    } 

    addBug(bug) { 
     console.log("Adding bug:", bug); 
     // We're advised not to modify the state, it's immutable. So, make a copy. 
     var bugsModified = this.state.bugs.slice(); 
     bug.id = this.state.bugs.length + 1; 
     bugsModified.push(bug); 
     this.setState({bugs: bugsModified}); 
    } 
}

來源

2016-05-13 James

你沒有綁定'this.addBug'。 – ivarni

第二個組件的addBugs方法如何在第一個組件的斜坡上找到自己？ –

您可能需要發佈您的舊工作代碼，以便我們可以看到您的意圖。 –

當使用ES6類擴展React.Component時，組件方法不會自動轉換爲this，例如當您使用React.createClass時。你可以在official documentation中閱讀更多關於這方面的內容。

在你的情況，最乾淨的解決辦法是在構造函數中addBug方法綁定到組件的this，就像這樣：

class BugList extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     bugs: bugData 
    } 
    this.addBug = this.addBug.bind(this); 
    } 

    render() { 
    console.log("Rendering bug list, num items:", this.state.bugs.length); 
    return (
     <div> 
     <h1>Bug Tracker</h1> 
     <BugFilter /> 
     <hr /> 
     <BugTable bugs={this.state.bugs} /> 
     <BugAdd addBug={this.addBug} /> 
     </div> 
    ) 
    } 

    addBug(bug) { 
     console.log("Adding bug:", bug); 
     // We're advised not to modify the state, it's immutable. So, make a copy. 
     var bugsModified = this.state.bugs.slice(); 
     bug.id = this.state.bugs.length + 1; 
     bugsModified.push(bug); 
     this.setState({bugs: bugsModified}); 
    } 
}

現在，您將能夠訪問this.state。

來源

2016-05-13 15:02:58

非常感謝，當我們需要綁定多個函數時如何？我會綁定每個構造函數嗎？ – James

是的，你需要將它們一一綁定。不幸的是，沒有更好的辦法。有一個[ES7提議]（http://blog.jeremyfairbank.com/javascript/javascript-es7-function-bind-syntax/），你可以在這裏執行':: this.addBug'，但這只是一個語法糖和做完全相同的事情（如果我沒有弄錯）。 –

嘗試之前與=>它會自動綁定到類實例定義addBug方法是這樣的：

addBug = (bug) => { 
     console.log("Adding bug:", bug); 
     // We're advised not to modify the state, it's immutable. So, make a copy. 
     var bugsModified = this.state.bugs.slice(); 
     bug.id = this.state.bugs.length + 1; 
     bugsModified.push(bug); 
     this.setState({bugs: bugsModified}); 
    }

不要忘記類的屬性變換添加到您的通天 http://babeljs.io/docs/plugins/transform-class-properties/

來源

2016-05-13 14:10:00

這是一個語法錯誤。 –

你需要從babel的類屬性轉換插件來解析語法 –

@JúliusRetzer你的問題也會語法錯誤，如果有人沒有正確設置它。 downvote看起來有點苛刻 –

React JS - Prop重定向到ES6後undefined

回答

相關問題