在 Reactjs 中使用子实例调用父函数答案

【问题标题】：Invoking parent function with instance from child in Reactjs在 Reactjs 中使用子实例调用父函数
【发布时间】：2015-06-25 13:39:38
【问题描述】：

我有两个组件，父组件使用子组件创建一个 dom。最后创建了更多和两个子组件。

在创建子组件时，在父组件中声明的 Click 事件 作为道具传递。我希望孩子用它的实例来唤起这个函数。

但我面临的问题是当点击事件从孩子身上唤起时；该实例将来自最后一个孩子。

请看一下代码，让我知道我哪里出错了

    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 >
    }
})

【问题讨论】：

您必须使用 IIFE 形成一个闭包，将索引值分配给点击处理程序。否则它将始终采用 for 循环的最后一个值
也许在你的函数“createMenuElement”中你忘了调用“return headerContent”

标签： javascript reactjs this

【解决方案1】：

我得到了解决方案 :) 这里的问题是我在循环中使用“refs”作为字符串，这被循环中的以下组件覆盖。

所以最后被替换的元素将在调用中。如果将“Refs”替换为动态字符串，例如 ref={"HeaderComponent"+index} 那么您将有一系列组件可供选择:)

那么这将是var componentKey = "accordionHeaderComponent1"; this.refs[componentKey ].toggleHeaderDisplay(true);

【讨论】：