react native中的多个按钮，其中一个单击了

Question

新学习者，我的屏幕上有多个按钮，在同一个容器中我有另一个标签，点击后我想显示标签，几秒钟后隐藏。

我通过this.state进行控制，问题是当事件触发时，它会显示所有标签，然后隐藏所有标签。我发现了一些解决方案，如分配ID等和按钮数组。

但问题是可以有无限的按钮，所以这不是为每个按钮设置状态的方法。或者如果有其他可能的方式。

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Dimensions } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super();
this.state = {
visible: false
}
}
_handleClick = () => {
this.setState({
visible: !this.state.visible
});
setTimeout(() => {
this.setState({
visible: false
});
},2000);
}
render() {
return (
<View style={styles.container}>
<View style={styles.item}>
<TouchableOpacity onPress={this._handleClick}><Text>Button 1</Text></TouchableOpacity>
{this.state.visible && <View style={styles.pic}>
<Text>Pic</Text>
</View>
}
</View>
<View style={styles.item}>
<TouchableOpacity onPress={this._handleClick}><Text>Button 2</Text></TouchableOpacity>
{this.state.visible && <View style={styles.pic}>
<Text>Pic</Text>
</View>
}
</View>

<View style={styles.item}>
<TouchableOpacity onPress={this._handleClick}><Text>Button 3</Text></TouchableOpacity>
{this.state.visible && <View style={styles.pic}>
<Text>Pic</Text>
</View>
}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
item: {
width: Dimensions.get("screen").width / 2,
height: 100,
backgroundColor: "rgba(0,0,0,.5)",
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
marginBottom: 1
},
pic: {
position: 'absolute',
right: 10,
top: 10,
}
});

Answer 1

您可以使用条件作为最简单的方法。您可以调用这样的函数，并为检查条件传递参数。

onPress={()=>this._handleClick("any flag")}

定义类似的功能

_handleClick(flag) { 
if(flag == 1) {
this.setState({state:true})
}
}