當函數傳遞給子代時，React onClick事件不會觸發

我有一個非常簡單的React組件，其中我將onClick事件的回調傳遞給子元素;然而，onClick事件似乎並不火。該類是低於，HamburgerMenu和Hamburger正確導入/渲染，沒有事件存在於這些組件。當函數傳遞給子代時，React onClick事件不會觸發

export default class AppHandler extends React.Component { 
    componentWillMount() { 
    this.state = { 
     menuOpen: false 
    }; 
    } 
    render() { 
    return (
     <div> 
     <HamburgerMenu menuOpen={this.state.menuOpen} /> 
     <div className="content"> 
      <nav> 
      <Hamburger onClick={this.onMenuChange.bind(this)} /> 
      </nav> 
     </div> 
     </div> 
    ); 
    } 
    onMenuChange() { 
    console.log('onMenuChanged'); 
    this.setState({ menuOpen: !this.menuOpen }); 
    } 
};

我可以得到它，如果在Hamburger組件我設定的根元素上的另一個onClick事件，然後設置this.props.onClick作爲事件處理工作，但似乎喜歡它的一切，從我不需要有鋸。

任何指導？謝謝！

來源

2015-09-18 BenM

它應該是'this.onMenuChange.bind（this）'，但是至少在單擊時會出現控制檯錯誤。你確定你點擊時絕對沒有控制檯錯誤？ – loganfsmyth

我的確發現有一些東西實際綁定到了'Hamburger'組件的'onClick'上，但它實際上並沒有調用onMenuChange'。所以它不會拋出錯誤，因爲實際上有些東西是綁定的，但是綁定的東西是不正確的。 – BenM

所以這並最終被我不明白其中越來越重視的onClick事件。由於組件本身在設置onClick={this.onMenuChange(this)}時不是真正的實際元素，因此我只爲子組件Hamburger設置prop.onClick。爲了實際獲得綁定工作，我需要做必須在Hamburger組件的根元素上設置onClick={this.props.onClick}。

來源

2015-09-18 02:32:03 BenM

-1

既然你導出一個ES6類，而不是使用createClass，你必須處理程序綁定到this：

<Hamburger onClick={this.onMenuChange.bind(this)} />

參見no autobinding的文檔做出反應，以準備原因：

方法遵循與常規ES6類相同的語義，這意味着它們不會自動將它綁定到實例。您必須明確使用.bind（this）或箭頭函數=>。

此外，你有你的狀態錯誤。 this.setState({ menuOpen: !this.menuOpen });將設置爲this.state.menuOpen，但由於您沒有對prop進行變更，因此它在此處不會更改：<HamburgerMenu menuOpen={this.menuOpen} />。

這行應該是：

<HamburgerMenu menuOpen={this.state.menuOpen} /> 

// and you should set a default state as well 

// in AppHandler 
componentWillMount() { 
    this.state = { 
    menuOpen: this.props.menuOpen 
    }; 
}

來源

2015-09-18 01:45:48

感謝您對狀態的更正，但即使將'onClick'綁定到'this'，onMenuChange函數也不會被調用。我確實看到有一個功能通過React開發工具實際上對事件不知所措，但沒有看到它曾經被調用過。 – BenM

@BenM，它被調用。閱讀我答案的第二部分。你需要使用'menuOpen = {this.state.menuOpen}'並改變狀態。 –

我確實看到了有關錯誤設置狀態的部分，但是我使用onMenuChange事件登錄到控制檯，並且沒有輸出。我更新了示例以包含更正，其中'onClick'仍然不會觸發。 – BenM

當您使用組件時，您不需要綁定this，這足以在您的<Hamburger />組件中綁定this。請參閱以下示例代碼

import React from 'react'; 
import Button from 'components/Button'; 

class App extends React.Component { 
    handleClick(e){ 
    console.log(e.target); 
    } 

    render(){ 
    return (
     <Button Text="Save" onClick={this.handleClick} /> 
    ); 
    } 
} 

//Button Component 
class Button extends React.Component { 
    clickEventHandler(e) { 
     this.props.onClick(e); 
    } 
    render(){ 
    return (
     <button onClick="this.clickEventHandler.bind(this)">{this.props.Text}</button> 
    ); 
    } 
}

來源

2015-09-18 05:29:34 TIJ

當函數傳遞給子代時，React onClick事件不會觸發

回答

相關問題