React复选框交互改造：Ok与其余选项互斥，其余支持多选

import React, { useState } from 'react';
import { View, Text, Checkbox } from 'react-native';

export default function App() {
  // 初始化选项数据
  const initialWindShield = [
    { key: 0, txt: 'Ok', isChecked: false, isImage: true },
    { key: 1, txt: 'Pitted', isChecked: false, isImage: false },
    { key: 2, txt: 'Cracked', isChecked: false, isImage: false },
    { key: 3, txt: 'Star (S)', isChecked: false, isImage: false },
  ];

  // 状态管理
  const [checked, setChecked] = useState({ windShield: initialWindShield });

  const handleChange = (key: number) => {
    setChecked(prevState => {
      const windShield = prevState.windShield.map(item => {
        // 点击的是"Ok"选项
        if (key === 0) {
          if (item.key === 0) {
            // 切换Ok的选中状态
            return { ...item, isChecked: !item.isChecked };
          } else {
            // 其他选项全部取消选中
            return { ...item, isChecked: false };
          }
        } else {
          // 点击的是非Ok选项
          if (item.key === 0) {
            // Ok选项强制设为未选中
            return { ...item, isChecked: false };
          } else if (item.key === key) {
            // 切换当前点击选项的选中状态
            return { ...item, isChecked: !item.isChecked };
          } else {
            // 其他非Ok选项保持原状态（支持多选）
            return { ...item };
          }
        }
      });
      return { ...prevState, windShield };
    });
  };

  return (
    <View style={{ flexDirection: 'row', marginHorizontal: 8, flexWrap: 'wrap', flex: 1 }}>
      {checked.windShield.map((item) => (
        <View key={item.key} style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', width: '50%' }}>
          <Checkbox
            status={item.isChecked ? 'checked' : 'unchecked'}
            onPress={() => handleChange(item.key)}
          />
          <Text>{item.txt}</Text>
        </View>
      ))}
    </View>
  );
}

关键逻辑说明 #

• 选中"Ok"时的处理：
  点击"Ok"（key=0）时，切换自身选中状态，同时将所有其他选项的isChecked设为false，确保"Ok"与其他选项互斥。

• 选中非"Ok"选项时的处理：

  1. 强制将"Ok"的isChecked设为false，确保非"Ok"选项与"Ok"互斥；
  2. 切换当前点击的非"Ok"选项的选中状态；
  3. 其他非"Ok"选项保持原有选中状态，实现多选功能。

另外补充了原代码缺失的useState状态初始化，将key从八进制格式改为十进制（避免语法隐患），并把循环的key改为item.key，更符合React最佳实践。

内容的提问来源于stack exchange，提问作者Sachin Mishra