分别切换多个按钮的背景色

Question

我正在使用地图同时渲染多个按钮。我希望在按下一个按钮时改变其背景颜色，但是现在当我按下一个按钮时，所有按钮的颜色都会改变。我可以为每个按钮创建状态以查看是否被选中，但是如果我有很多按钮不实用。有什么解决方法吗？

 const [selected, setSelected] = React.useState(false);
 const genres = ["Adventure", "Arts", "Leisure", "Nature"];
 const onSelect = () => setSelected(!selected);

  buttons = () =>
    genres.map((items) => (
      <TouchableOpacity
        key={items}
        onPress={() => onSelect()}
        style={[
          styles.button,
          { backgroundColor: selected ? "#00cc00" : "#f2f2f2" },
        ]}
      >
        <Text style={{ fontSize: 18 }}>{items}</Text>
      </TouchableOpacity>
    )); 

编辑：我想一次选择多个按钮。如果我单击“冒险”和“休闲”，则它们的两个按钮颜色都会更改，但其余按钮保持不变

Answer 1

const [selected, setSelected] = React.useState(null);
const genres = ['Adventure', 'Arts', 'Leisure', 'Nature'];

buttons = () =>
    genres.map(item => (
        <TouchableOpacity
            key={item}
            onPress={() => setSelected(item)}
            style={[styles.button, { backgroundColor: item === selected ? '#00cc00' : '#f2f2f2' }]}
        >
            <Text style={{ fontSize: 18 }}>{items}</Text>
        </TouchableOpacity>
    ));

编辑：已选择乘

const [selected, setSelected] = React.useState([]);
const genres = ['Adventure', 'Arts', 'Leisure', 'Nature'];
const handlePress = genre =>
    selected.includes(genre) ? setSelected(selected.filter(s => s === item)) : setSelected([...selected, genre]);

buttons = () =>
    genres.map(item => (
        <TouchableOpacity
            key={item}
            onPress={() => includes(item)}
            style={[styles.button, { backgroundColor: selected.includes(genre) ? '#00cc00' : '#f2f2f2' }]}
        >
            <Text style={{ fontSize: 18 }}>{items}</Text>
        </TouchableOpacity>
    ));