在多个组件中触发相同的功能答案

【问题标题】：Same Function is Triggered IN Multiple Components在多个组件中触发相同的功能
【发布时间】：2020-04-27 19:36:45
【问题描述】：

我正在使用react-native-material-menu 的弹出窗口来显示菜单选项。

但问题是，它不适用于多种场景。

我的意思是当我点击第一个菜单按钮时，会触发相同的方法，因此每次都会打开相同的菜单。

处理这种特殊情况的更好方法应该是什么。

这里是Snack

_menu = null;

 setMenuRef = ref => {
     this._menu = ref;
 };

 hideMenu = () => {
     this._menu.hide();
 };

 showMenu = () => {
     this._menu.show();
 };


{this.state.clientsList.map((item) => {
                    return (
                        <View style={styles.caseItem} >
                            <Card style={styles.card}>
                                <CardItem>
                                    <Body>
                                        <View style={styles.rowTitle}>
                                            <Text style={styles.title}>{item.FullName}</Text>
                                            <Menu
                                                ref={this.setMenuRef}
                                                button={<Icon type="Feather" name="more-vertical" onPress={this.showMenu} style={{ fontSize: 20, color: '#555' }} />}
                                            >
                                                <MenuItem onPress={this.hideMenu}>View</MenuItem>
                                                <MenuItem onPress={this.hideMenu}>Edit</MenuItem>
                                                <MenuItem onPress={this.hideMenu}>Delete </MenuItem>
                                            </Menu>
                                        </View>

                                        <View>
                                            <Text style={styles.lbl}>Email: <Text style={styles.lblValue}>{item.EmailID}</Text></Text>
                                            <Text style={styles.lbl}>Client Type: <Text style={styles.lblValue}>{item.ClientType}</Text></Text>
                                        </View>
                                    </Body>
                                </CardItem>
                            </Card>
                        </View>
                    );
                })}

【问题讨论】：

标签： javascript react-native

【解决方案1】：

您对所有菜单组件使用相同的引用

你必须为每个菜单使用不同的参考。

最佳方法：

为 Menu 创建 HOC 并在其中处理它们的第一种方法。

中等

或为菜单列表创建动态Ref in React

仅用于运行代码

第三个是为每个菜单创建参考

_menu1 = null;
_menu2 = null; 
_menu3 = null;

【讨论】：

【解决方案2】：

您每次都调用相同的ref。我没有使用你提到的库，但如果它必须依赖 ref，你可以创建一个引用列表，语法在这个 post 中。

【讨论】：