React Native如何根据子组件选择结果更新父组件状态并修改选中项边框

问题根源 #

你当前代码用了全局的toggle控制边框、全局chooseData存储运动等级，所有运动项共用这两个状态，所以无法实现单个运动项的独立选中效果。 #

具体修改方案 #

1. 调整Sport.js的状态定义

给每个运动项新增独立的选中状态和等级字段，新增当前选中运动ID的状态，删除冗余的全局toggle：

// 原来的sports初始化新增字段
const [sports, setSports] = useState([
  {
    id: 1,
    urlIcon: "ios-football",
    name: "Football",
    selected: false, // 控制边框显隐
    level: "0%" // 存储当前运动的等级
  },
  // 其余5个运动项都加这两个字段，同上
]);

// 新增当前打开弹窗对应的运动ID
const [currentSelectId, setCurrentSelectId] = useState(null);
// 保留modalOpen状态，删除原有的toggle、chooseData状态
const [modalOpen, setModalOpen] = useState(false);

2. 重写弹窗控制和等级赋值逻辑

const changeModalVisibility = (bool, id) => {
  setModalOpen(bool);
  // 打开弹窗时记录当前点击的运动ID
  if(bool) setCurrentSelectId(id);
};

const setData = (option) => {
  // 仅更新当前选中ID对应的运动项的状态
  setSports(prevSports => {
    return prevSports.map(sport => {
      if(sport.id === currentSelectId) {
        return {...sport, selected: true, level: option}
      }
      return sport
    })
  })
  setModalOpen(false);
};

3. 调整渲染逻辑，每个运动项用自身状态判断样式

{sports.map((sport) => (
  <TouchableOpacity
    onPress={() => {
      changeModalVisibility(true, sport.id);
    }}
    style={{
      alignItems: "center",
      display: "flex",
      flexDirection: "row",
      bottom: 10,
      width: 150,
      height: 50,
      margin: 10,
      backgroundColor: "#E4E9DD",
      // 用当前运动项自身的selected属性判断边框颜色
      borderColor: sport.selected ? "#49B5F2" : "white",
      borderWidth: 1,
      borderRadius: 5,
    }}
    key={sport.id}
  >
    {/* 其余结构不变 */}
    <View style={styles.rate}>
      {/* 用当前运动项自身的level属性显示等级 */}
      <Text style={styles.rateText}>{sport.level}</Text>
    </View>
  </TouchableOpacity>
))}

4. ModalPicker无需修改，原有逻辑可以正常传递选中的等级值

内容的提问来源于stack exchange，提问作者Justin Abodo