reactnative（型別腳本）：在平面串列中選擇父子復選框

我的目標是，當用戶在平面串列中選中其中一位父親（'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;

uj5u.com熱心網友回復：

修改您的onClick函式，使其data使用該方法回圈遍歷陣列中的每個條目，some()并檢查是否單擊了任何子項（兒子）。

如果其中之一是，則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
    })
  });
};

如果單擊父項，則也選中或取消選中所有子項。

const onClickFather = () => {
  setData(prevState => {
    const isParentChecked = !prevState.checked;
        
    return ({
      ...prevState,
      checked: isParentChecked,
      data: prevState.data.map(item => ({ ...item, checked: isParentChecked }))
    });
  });
};

標籤：javascript反应打字稿反应本机反应挂钩

上一篇：當useEffect似乎沒有錯誤時，javascript/react語法錯誤

下一篇：NEXTJS-從服務器獲取資料