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

【问题标题】：OnPress change the style of component from loop- React Native with hooksOnPress 从循环中改变组件的样式- React Native with hooks
【发布时间】：2021-03-22 04:33:22
【问题描述】：

所以我在 React Native 方面还是个新手，我正在尝试开发一个问答游戏，用户将在其中获得一组答案。我想在用户按下组件时选择更改组件的颜色，有点切换它。到目前为止，我想出了 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>

我需要知道如何只为一个实现背景更改，并让它在每次用户选择或取消选择时切换。谢谢

【问题讨论】：

选中时，背景颜色应为#dddddd else #fff ?
@KetanRamteke 是的，或者任何两个花冠
添加了解决方案，请查看。

标签： react-native react-hooks use-state

【解决方案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

【讨论】：