javascript - 当有多个组件时调用特定子 ref 的方法以使用react

Question

我有一个父组件，它是一组子过滤器菜单组件。每个子组件都有一组单选按钮，这些按钮都通过它们的状态来确定它们是否被选中。

在父组件中，当至少有一个过滤器可供用户选择时，会显示所选过滤器选项的按钮列表。

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

我看过here和 here当 ref 已知时如何在单个子 ref 中调用函数，但是当在循环中生成 refs 时我将如何完成此操作，并且我只想调用与按钮匹配的特定子组件的 ref被点击了？

这里是相关的[伪代码]:

//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 传递它需要的 Prop ，比如它的值，以及一个回调函数，以在发生变化时返回。

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

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

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

希望这有帮助:)