我只想从我自己的组件中显示他自己的按钮下拉菜单，该组件已在 React Native 中使用数组映射方法循环

Question

大家好

我有一个React Native项目，它也为我的UI/UX使用框架UI Kitten，为我的数据库使用Realm

。

第一

我从数据库中检索了数据，如下所示

[
{
name: "Eric",
age: 21,
city: "Jakarta"
},
{
name: "Alex",
age: 18,
city: "Surabaya"
}
]

第二

UI Kitten有一个下拉组件，称为溢出菜单。为了在屏幕中显示数据，我制作了自己的组件，在组件中，我添加了一个下拉列表或OverflowMenu最后一件事，我使用 Array.map()方法循环我的组件来显示每个数据，因此用户可以对已显示的每个数据执行操作。

示例代码如下所示

import React from 'react';
import { View } from 'react-native'
import { Text, OverflowMenu, MenuItem, Button } from '@ui-kitten/components';
const ShowPersonData = (props) => {
return(
<View>
<Text>Name: {props.personName}</Text>
<Text>Age: {props.personAge}</Text>
<Text>City: {props.personCity}</Text>
<OverflowMenu
{ // This is trigger button for show a dropdown menu }
anchor={() => (<Button onPress={props.onPressMenu}>ShowDropdown</Button>)}
visible={props.visibleDropdown} { // Show or Hide }
onBackdropPress={props.onPressOutsideMenu}> { // When press outside dropdown menu }
<MenuItem title='Edit'/>
<MenuItem title='Delete'/>
<MenuItem title='Details'/>
</OverflowMenu>
</View>
);
};
export default class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
visibleDropdown: false
}
}
render() {
const PersonData = [
{
name: "Eric",
age: 21,
city: "Jakarta"
},
{
name: "Alex",
age: 18,
city: "Surabaya"
}
];
return(
<View>
{
PersonData.map((person, index) => {
<ShowPersonData
key={index}
personName={person.name}
personAge={person.age}
personCity={person.city}
onPressMenu={() => this.setState({ visibleDropdown: true })} { // I have no idea }
visibleDropdown={this.state.visibleDropdown} { // I have no idea }
onPressOutsideMenu={() => this.setState({ visibleDropdown: false })}
/>
})
}
</View>
);
}
};

问题所在

我不知道如果只按下他自己的按钮，如何显示下拉菜单，在上面的示例中，它只显示我循环的每个组件中的所有下拉菜单

Answer 1

你的代码的问题在于你正在循环一个返回 JSX 元素的function，如果你试图从他自己的按钮显示下拉菜单，那就完全错误了。

简单解释

如果你想从他自己的按钮显示一个下拉菜单，你也必须制作他自己的state，在你的代码中，我看到一个核心问题，你正在使用一个MyComponent state来显示该下拉菜单，如果你按下一个按钮，你的组件会自动用.map()方法循环，所有整个下拉菜单都会显示， 因为您只使用一种state

如何解决？

创建一个名为PersonDataShowcase.jsx的新文件，代码如下所示

import React from 'react';
import { View } from 'react-native'
import { Text, OverflowMenu, MenuItem, Button } from '@ui-kitten/components';
export default class PersonDataShowcase extends React.Component {
constructor(props) {
super(props);
this.state = {
visibleDropdown: false
}
}
render() {
const { personName, personAge, personCity } = this.props
return(
<View>
<Text>Name: {personName}</Text>
<Text>Age: {personAge}</Text>
<Text>City: {personCity}</Text>
<OverflowMenu
anchor={() => (<Button onPress={() => this.setState({ visibleDropdown: true })}>ShowDropdown</Button>)}
visible={this.state.visibleDropdown}
onBackdropPress={() => this.setState({ visibleDropdown: false })}>
<MenuItem title='Edit'/>
<MenuItem title='Delete'/>
<MenuItem title='Details'/>
</OverflowMenu>
</View>
);
}
};

并将该文件import在您的Home.jsx或任何您想要显示该数据的地方，然后像这样编写代码

import React from 'react';
import { View } from 'react-native';
import PersonDataShowcase from './path/to/PersonDataShowcase.jsx';
export default class MyComponent extends React.Component {
render() {
const PERSON_DATA = [
{
name: "Eric",
age: 21,
city: "Jakarta"
},
{
name: "Alex",
age: 18,
city: "Surabaya"
}
];
return(
<View>
{
PERSON_DATA.map((person, index) => {
<PersonDataShowcase
personName={person.name}
personAge={person.age}
personCity={person.city}
/>
})
}
</View>
);
}
};

现在您的问题应该解决了，下拉菜单将仅从他自己的按钮显示