React Native Hooks实现多选复选框：类组件转函数组件方案

以下是转换后的函数组件代码，实现了多选复选框功能，点击按钮可获取所有选中项：

import React, { useState, useEffect } from 'react';
import { View, Text, CheckBox, TouchableOpacity, Button } from 'react-native';

export default function App() {
  // 原始水果列表（常量，无需放入状态）
  const Dts = ["Banana", "Apple", "Mango", "Watermelon"];
  // 存储带选中状态的水果数据
  const [data, setData] = useState([]);

  // 初始化格式化数据，替代componentDidMount
  useEffect(() => {
    const formatData = Dts.map((fruit, index) => ({
      id: index,
      key: fruit,
      checked: false
    }));
    setData(formatData);
  }, []);

  // 切换复选框选中状态
  const onChecked = (id) => {
    setData(prevData => 
      prevData.map(item => 
        item.id === id ? {...item, checked: !item.checked} : item
      )
    );
  };

  // 渲染水果复选列表
  const renderFruits = () => {
    return data.map((item) => (
      <TouchableOpacity 
        style={{ flexDirection: "row", alignItems: 'center', marginVertical: 8 }} 
        key={item.id} 
        onPress={() => onChecked(item.id)}
      >
        <CheckBox 
          value={item.checked} 
          onValueChange={() => onChecked(item.id)} 
        />
        <Text style={{ fontWeight: "bold", marginLeft: 8 }}>{item.key}</Text>
      </TouchableOpacity>
    ));
  };

  // 获取并展示选中的水果
  const getSelectedFruits = () => {
    const selectedFruits = data
      .filter(item => item.checked)
      .map(item => item.key);
    alert(selectedFruits.join(', '));
  };

  return (
    <View style={{ padding: 20 }}>
      {renderFruits()}
      <View style={{ marginTop: 20 }}>
        <Button onPress={getSelectedFruits} title="提交选中项" />
      </View>
    </View>
  );
}

关键改动说明 #

• 用useState管理带选中状态的水果数据，替代类组件的state
• 用useEffect在组件挂载时格式化原始数据，替代componentDidMount生命周期
• 复选框状态更新遵循React状态不可变原则：通过map创建新数组，避免直接修改原状态数组
• 选中项获取逻辑简化：通过filter筛选选中项，再用map提取水果名称，代码更简洁高效
• 移除类组件的this绑定，直接使用函数组件的变量和函数，逻辑更清晰

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