单独切换多个按钮的背景颜色

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>
    ));

编辑：我想同时选择多个按钮。如果我点击 Adventure 和 Leisure，它们的按钮颜色都会改变，但其余部分保持不变。可以多次按下来切换颜色

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 !== genre)) : setSelected([...selected, genre]);

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

单独切换多个按钮的背景颜色

toggle background color of multiple buttons individually

state

render

button

react-native

react-hooks