在Reactjs中使用來自子實例的父函數調用

我有兩個組件，父組件使用子組件創建一個dom。最後創建更多和兩個子組件。在Reactjs中使用來自子實例的父函數調用

在創建子組件a時單擊在父項中聲明的事件作爲道具傳遞。我期望孩子用它的實例喚起功能。

但我面對的問題是點擊事件從孩子喚起的時候;該實例將來自最後一個孩子。

請對代碼看看，讓我知道我要去哪裏錯了

var AccordionControl = React.createClass({ 

    handleClick: function (event) { 
     event.preventDefault(); 
     this.refs["accordionHeaderComponent"].toggleHeaderDisplay(true); 
    }, 


    createMenuElement: function (menuContentProps, index) { 
     var boundClick = this.handleClick.bind(this, index); 

     var headerContent = <MenuHeader key = {index} 
     clickEvent = {boundClick} 
     ref = "HeaderComponent" 
     menuHeaderProps = {menuItemProps} 
     />; 
    }, 

    render: function(){ 
       for(var index=0; index<menuData.length; index++) { 
         wrapperContent.push(this.createMenuElement(menuData[index],index)); 
       } 
       return wrapperContent; 
    }}) 

    var MenuHeader = React.createClass({ 
    render: function() { 
     var menuHeaderProps = this.props.menuHeaderProps; 
     return <div onClick={this.props.clickEvent} > </div > 
    } 
})

來源

2015-06-25 teenu

您對使用IIFE以形成封蓋分配要點擊處理程序的索引值。否則它將始終採用for循環的最後一個值 – mohamedrias

也許在函數「createMenuElement」中忘記調用「return headerContent」 –

我得到了解決:)這裏的問題是我現在用的是「裁判」的循環中的字符串並且在循環中由以下組件覆蓋寫入。

因此，被替換的最後一個元素將在通話中。如果「參考文獻」被替換爲動態字符串如 ref={"HeaderComponent"+index} 那麼你將有組件的集合選擇:)

那麼這將是 var componentKey = "accordionHeaderComponent1"; this.refs[componentKey ].toggleHeaderDisplay(true);

來源

2015-06-25 16:08:32 teenu

在Reactjs中使用來自子實例的父函數調用

回答

相關問題