OnPress 从循环中改变组件的样式- React Native with hooks

Question

所以我是 React Native 的新手，我正在尝试开发一个问答游戏，用户会得到一组答案。我想 select 在用户按下时更改组件的颜色，切换它。到目前为止我想出了 useState 解决方案，但不幸的是无法弄清楚如何排除颜色的变化，我想我需要遵循索引或其他东西，任何人都可以让我了解解决方案的过程。

export const QuizScreen = ({ navigation,route }) => {
    const [quizArray, setQuizArray] = React.useState([])
    const [rightAnswer, setRightAnswer]= React.useState(false)
    const [selectBtn, setSelectBtn] = React.useState("#fff")
return(
     <View>
       {quizArray[qno].answer.map(r=>
        <TouchableHighlight style={[styles.listItem, {backgroundColor:selectBtn}]}
           onPress={()=>{
            setRightAnswer(r.rightAnswer)
            setSelectBtn("#DDDDDD")   //so this changes logically all the component from the list
                }}
                activeOpacity={0.6} underlayColor="#DDDDDD"
                    
                >
                <Text>{r.option}</Text>
             </TouchableHighlight>
             
            )}
           </View>

我需要知道如何只为一个人实现背景更改，以及如何让它在每次用户 select 或 deselect 时切换。谢谢

Answer 1

关于使用索引来确定单击的列表项，您是正确的。

您可以通过使用 selectBtn 状态存储所选项目的索引来更改颜色，然后使用该状态相应地设置背景颜色。

以下是您的操作方法：

export const QuizScreen = ({ navigation, route }) => {
  const [quizArray, setQuizArray] = React.useState([]);
  const [rightAnswer, setRightAnswer] = React.useState(false);
  const [selectBtn, setSelectBtn] = React.useState(null);
  return (
    <View>
      {quizArray[qno].answer.map((r, index) => (
        <TouchableHighlight
          style={[
            styles.listItem,
            { backgroundColor: selectBtn === index ? '#dddddd' : '#fff' },
          ]}
          onPress={() => {
            setRightAnswer(r.rightAnswer);
            setSelectBtn(index);
          }}
          activeOpacity={0.6}
          underlayColor="#DDDDDD">
          <Text>{r.option}</Text>
        </TouchableHighlight>
      ))}
    </View>
  );
};

这是工作示例：Expo Snack

2

OnPress 从循环中改变组件的样式- React Native with hooks

OnPress change the style of component from loop- React Native with hooks

react-native

react-hooks

use-state