我有一个父组件，它是一组子过滤器菜单组件。每个子组件都有一组单选按钮，这些按钮都通过它们的状态来确定它们是否被选中。
在父组件中，当至少有一个过滤器可供用户选择时，会显示所选过滤器选项的按钮列表。
当这些按钮之一被点击时，它应该调用该子组件中的一个函数来重置其单选按钮组。
我看过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 子组件单击的按钮的动态引用。
最佳答案
希望我能正确理解您的问题，我想建议一种不同的方法。
在父组件中，您有一个保存过滤器的状态。这些过滤器中的每一个都有自己的一组值。然后，父级映射过滤器并向每个 FilterContainer 传递它需要的 Prop ，比如它的值，以及一个回调函数，以在发生变化时返回。
根据这些值，FilterContainer 知道如何呈现它的单选按钮。数据从父级单向流向子级。
单击单选按钮后，您将使用过滤器字段和当前值调用父级提供的回调，例如单击了性别单选按钮，您将调用 this.props.onValueChange('gender', 'female')。
然后父级将接收回调并相应地设置其过滤器状态。状态发生变化，过滤器将使用新数据再次呈现。
希望这有帮助:)
关于javascript - 当有多个组件时调用特定子 ref 的方法以使用react，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55958083/