React Native中具有相同功能名称的多个组件

Question

React Native中具有相同功能名称的多个组件

我使用react-native-material-menu'spopup来显示菜单选项。

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

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

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

 _menu = null;

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

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

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


  <FlatList
      data={this.state.clientsList}
      renderItem={({ 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>
         );
      }}
      keyExtractor={item => item.ID}
   />

Run Code Online (Sandbox Code Playgroud)

这里的小吃

Answer 1

Dha*_*osh 6

为了以正确的方式处理状态，您需要创建一个新的类，它将只处理 MenuItem

下面的代码将起作用：这是Snack。

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";
import Constants from "expo-constants";
import { Container, Content, Card, CardItem, Body, Icon } from "native-base";
import * as Font from "expo-font";
import Menu, { MenuItem, MenuDivider } from "react-native-material-menu";
// You can import from local files
import AssetExample from "./components/AssetExample";

export default class App extends React.Component {

  onView = () => {
    alert("Do something here");
    console.log("You can do what ever you want here");
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.caseItem}>
          <Card style={styles.card}>
            <CardItem>
              <Body>
                <View style={styles.rowTitle}>
                  <Text style={styles.title}>John Doe</Text>
                  <CustomMenu onView={this.onView}/>
                </View>

                <View>
                  <Text style={styles.lbl}>
                    Email: <Text style={styles.lblValue}>john@yopmail.com</Text>
                  </Text>
                  <Text style={styles.lbl}>
                    Client Type: <Text style={styles.lblValue}>Individual</Text>
                  </Text>
                </View>
              </Body>
            </CardItem>
          </Card>
        </View>
        <View style={styles.caseItem}>
          <Card style={styles.card}>
            <CardItem>
              <Body>
                <View style={styles.rowTitle}>
                  <Text style={styles.title}>John Doe</Text>
                  <CustomMenu  onView={this.onView}/>
                </View>

                <View>
                  <Text style={styles.lbl}>
                    Email: <Text style={styles.lblValue}>john@yopmail.com</Text>
                  </Text>
                  <Text style={styles.lbl}>
                    Client Type: <Text style={styles.lblValue}>Individual</Text>
                  </Text>
                </View>
              </Body>
            </CardItem>
          </Card>
        </View>
        <View style={styles.caseItem}>
          <Card style={styles.card}>
            <CardItem>
              <Body>
                <View style={styles.rowTitle}>
                  <Text style={styles.title}>John Doe</Text>
                  <CustomMenu onView={this.onView} />
                </View>

                <View>
                  <Text style={styles.lbl}>
                    Email: <Text style={styles.lblValue}>john@yopmail.com</Text>
                  </Text>
                  <Text style={styles.lbl}>
                    Client Type: <Text style={styles.lblValue}>Individual</Text>
                  </Text>
                </View>
              </Body>
            </CardItem>
          </Card>
        </View>
      </View>
    );
  }
}

class CustomMenu extends React.Component {
  _menu = null;
  setMenuRef = ref => {
    this._menu = ref;
  };

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

  onViewClick = () => {
    const {onView} = this.props;
    onView();
    this.hideMenu();
  }

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

  render() {
    return (
      <Menu
        ref={this.setMenuRef}
        button={
          <Icon
            type="Feather"
            name="more-vertical"
            onPress={this.showMenu}
            style={{ fontSize: 20, color: "#555" }}
          />
        }
      >
        <MenuItem onPress={this.onViewClick}>View</MenuItem>
        <MenuItem onPress={this.hideMenu}>Edit</MenuItem>
        <MenuItem onPress={this.hideMenu}>Delete </MenuItem>
      </Menu>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  rowTitle: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%"
  },
  title: {
    fontSize: 14,
    marginBottom: 5
  },
  lbl: {
    fontSize: 11,
    color: "#000"
  },
  lblValue: {
    fontSize: 11,
    color: "#555",
    fontWeight: "normal"
  },
  caseItem: {
    marginBottom: 0
  }
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，10 月前
查看次数：	680 次
最近记录：	5 年，10 月前