Question

我有一个父组件，它是一组子过滤器菜单组件。每个子组件都有一组单选按钮，所有按钮均决定是否通过其状态进行检查。

在父组件中，当至少有一个用户对其进行选择的过滤器时，将显示所选过滤器选项的按钮列表。

当单击这些按钮之一时，它应在该子组件中调用一个函数以重置其单选组。

我已经看到here和here在知道该引用的情况下如何在单个子引用中调用函数，但是当在循环中生成该引用时，我将如何完成此操作，是否只想调用与所单击按钮匹配的特定子组件的引用？

以下是相关的[伪代码]：

//FILTERS.JS
{filters.map((filter, index) => {
    return (
        <FilterContainer
            key={`filter--${filter.id}`}
            //NEED UNIQUE REF HERE THAT I CAN CALL
        />
    )
})}

handleClearSelectedFilter = ()=>{
    this.[matchingFilterContainerRef].current.resetRadioGroup();
}

其中matchingFilterContainerRef是我为对应的filterContainer子组件单击的按钮所匹配的动态参考。

Answer 1

希望我能正确理解您的问题，我想提出一种不同的方法。

在父组件中，您拥有一个保存过滤器的状态。每个过滤器都有自己的一组值。然后，父级映射到筛选器，并将每个FilterContainer所需的道具（如其值）以及回调函数传递给发生变化的地方。

根据值，FilterContainer知道如何呈现其单选按钮。数据从父级流向子级。

单击单选按钮后，您将调用父级提供的带有过滤器字段和当前值的回调，例如单击性别单选按钮，您将呼叫this.props.onValueChange('gender', 'female')。

然后，父级将接收回调并相应地设置其过滤器状态。状态发生变化，过滤器将使用新数据再次呈现。

希望这会有所帮助：）

Answer 2

您可以这样做

{filters.map((filter, index) => {
return (
    <FilterContainer
        key={`filter--${filter.id}`}
        ref={`ref_${filter.id}`}
        //NEED UNIQUE REF HERE THAT I CAN CALL
    />
)})}

当您要访问它时：

this.refs[`ref_${filterId}`]

在此处reactjs-dom-dynamic-refs

当有多个组件时，在react中调用特定子ref的方法

2 个答案: