Javascript 选择项目时应用相应的颜色和图标

我正在开发模式选择器组件，该组件允许用户根据市值和数量密钥对加密货币进行排序

我已经实现了layout和onPress事件，但我不知道如何在选中项目时正确应用颜色（

#03AE9D

）和切换排序图标（

sort desc

或

sort asc

）

这是我的代码片段。为了简单起见，我删除了

样式表

代码

可以找到完整的版本

//app/components/ModalPicker.js
const OPTIONS=[‘市值’、‘成交量’]；
const ModalPicker=（道具）=>{
const[isSelected，setSelected]=useState（false）；
常量颜色=使用备注（（）=>{
是否选择返回？“#03AE9D”：“#67CF”；
}，[当选]；
const onPressCallback=useCallback（（）=>{
setSelected（（上一个）=>！上一个）；
}，[当选]；
const onPressItem=（选项）=>{
道具变更可视性（假）；
道具设置数据（选项）；
};
const option=OPTIONS.map（（项目、索引）=>{
返回(
onPressItem（项目）}
>
{item}
{/*  */}
{/*  */}
);
});
返回(
props.changeModalVisibility（false）}
style={style.container}
>
{option}
);
};
导出默认ModalPicker；

这就是问题的关键所在。欢迎提出任何建议

---

适用于任何其他有此问题的人。您可以添加活动索引状态并在onPress回调中进行设置：

const[activeIndex，setActiveIndex]=useState（）；
const onPressItem=（选项，索引）=>{
setActiveIndex（索引）；
已选择（正确）；
//道具变更可视性（假）；
//道具设置数据（选项）；
};

然后在项目映射中使用它：

const option=OPTIONS.map（（项目，索引）=>{
返回(
onPressItem（项目，索引）}
>
{item}
{/*  */}
{/*  */}
);
});

---

查看此处的小吃了解工作示例

我认为您需要在按下Callback时启动

OnPress

？能否提供更多示例？请参阅此处使用您的代码。屏幕广播：。正如您所见，它正在应用具有活动索引状态的颜色样式。因此，颜色将仅适用于该项目。对于排序图标也可以执行相同的操作

isSelected

也不再需要了。做得很好！谢谢你的大力帮助。

// app/components/ModalPicker.js

const OPTIONS = ['market cap', 'volume'];

const ModalPicker = (props) => {
  const [isSelected, setSelected] = useState(false);

  const color = useMemo(() => {
    return isSelected ? '#03AE9D' : '#676767cf';
  }, [isSelected]);

  const onPressCallback = useCallback(() => {
    setSelected((prev) => !prev);
  }, [setSelected]);

  const onPressItem = (option) => {
    props.changeModalVisibility(false);
    props.setData(option);
  };

  const option = OPTIONS.map((item, index) => {
    return (
      <TouchableOpacity
        style={
          index === OPTIONS.length - 1 ? styles.noBorderOption : styles.option
        }
        key={index}
        onPress={() => onPressItem(item)}
      >
        <View style={styles.sort}>
          <Text style={[styles.text, { color }]}>{item}</Text>
          {/* <FontAwesome name='sort-desc' size={24} color='#676767cf' /> */}
          {/* <FontAwesome name='sort-asc' size={24} color='#676767cf' /> */}
        </View>
      </TouchableOpacity>
    );
  });

  return (
    <TouchableOpacity
      onPress={() => props.changeModalVisibility(false)}
      style={styles.container}
    >
      <View style={styles.modal}>
        <ScrollView>{option}</ScrollView>
      </View>
    </TouchableOpacity>
  );
};
export default ModalPicker;