react native（打字稿）：在平面列表中选择父子复选框

Question

我的目标是，当用户在平面列表中选择其中一位父亲（'Non Veg Biryanis'、'Pizzas'、'Drinks'、'Deserts'）的复选框时，也会选择属于他的那些儿子。 当从属于同一父亲的所有孩子的复选框中删除时，父亲的复选框也会被删除。

这是我的例子（但它不起作用，可以看到，父亲“比萨饼”没有检查但他的儿子检查了）

数据是：

[
    {
      title: 'Non Veg Biryanis',
      checked: false,
      data: [
        { key: 'chicken', value: false, checked: false },
        { key: 'meat', value: false, checked: false },
        { key: 'veg', value: false, checked: false },
      ],
    },

    {
      title: 'Pizzas',
      checked: false,
      data: [
        { key: 'olives', value: false, checked: false },
        { key: 'green cheese', value: false, checked: false },
        { key: 'paprika', value: false, checked: false },
      ],
    },
    {
      title: 'Drinks',
      checked: false,
      data: [
        { key: 'cola', value: false, checked: false },
        { key: 'sprite', value: false, checked: false },
        { key: 'orange', value: false, checked: false },
      ],
    },
    {
      title: 'Deserts',
      checked: false,
      data: [
        { key: 'cake', value: false, checked: false },
        { key: 'ice-cream', value: false, checked: false },
        { key: 'pie', value: false, checked: false },
      ],
    },
  ]

手风琴：

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, FlatList, LayoutAnimation, Platform, UIManager } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import styles from './AccordianStyle';

const Accordian = props => {
  const [data, setData] = useState(props.item);
  const [expanded, setExpanded] = useState(false);

  if (Platform.OS === 'android') {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }

  const onClick = (index: number) => {
    console.log(data);
    const temp = { ...data };
    temp.data[index].checked = !temp.data[index].checked;
    setData(temp);
  };
  const onClickFather = () => {
    const temp = { ...data };
    temp.checked = !temp.checked;
    if (temp.checked) {
      temp.data = temp.data.map((item: { checked: boolean }) => {
        item.checked = true;
      });
    }
    console.log(temp);
    setData(temp);
  };
  const toggleExpand = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setExpanded(!expanded);
  };
  return (
    <View>
      <View style={styles.row}>
        <TouchableOpacity onPress={() => onClickFather()}>
          <Icon name={'check-circle'} size={24} color={data.checked ? 'green' : '#d3d7de'} />
        </TouchableOpacity>
        <Text style={[styles.title]}>{data.title}</Text>
        <TouchableOpacity style={styles.row} onPress={() => toggleExpand()}>
          <Icon name={expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={30} color={'grey'} />
        </TouchableOpacity>
      </View>
      <View style={styles.parentHr} />
      {expanded && (
        <View style={{}}>
          <FlatList
            data={data.data}
            numColumns={1}
            scrollEnabled={false}
            renderItem={({ item, index }) => (
              <View>
                <TouchableOpacity
                  style={[styles.childRow, styles.button, item.checked ? styles.btnActive : styles.btnInActive]}
                  onPress={() => onClick(index)}
                >
                  <Text style={[styles.itemInActive]}>{item.key}</Text>
                  <Icon name={'check-circle'} size={24} color={item.checked ? 'green' : '#d3d7de'} />
                </TouchableOpacity>
                <View style={styles.childHr} />
              </View>
            )}
          />
        </View>
      )}
    </View>
  );
};

export default Accordian;

Answer 1

修改您的onClick 函数，使其使用some() 方法遍历data 数组中的每个条目，并检查是否有任何子项（儿子）被单击。

如果其中之一是，则相应地更新设置 checked 属性。

const onClick = (index: number) => {
  setData(prevState => {
    const newData = prevState.data.map((entry, entryIndex) =>
      index === entryIndex ?
        ({ ...entry, checked: !entry.checked }) : 
        entry
    );

    const isAnyChildChecked = newData.some(({ checked }) => 
      checked === true
    );

    return ({
      ...prevState,
      checked: isAnyChildChecked,
      data: newData
    })
  });
};