React Native - 如何从父级获取 FlatList 项的值

Posted 2023-02-25

【中文标题】React Native - 如何从父级获取 FlatList 项的值

【英文标题】：React Native - How to get the values of FlatList Items from Parent

【发布时间】：2021-04-16 14:33:16

【问题描述】：

我正在使用已呈现项目的平面列表。平面列表中的每个项目都是一个自定义组件，具有一个包含整数值的状态。在平面列表下方，我有一个按钮，单击它必须打印项目中状态变量的值。我正在尝试使用“useRef”数组。我无法访问平面列表的项目。我缺少一些东西来处理它。

这是我的参考代码：

//Custom Component
export const SelectionOptions = (props: any) => 
    const 
        title = '',
        options = [],
        selected = [],
        allowSingleSelection = true,
     = props;

    const [selectedItems, setSelectedItems] = useState(selected);

  
    return (
    <View>
    .
    .
    .
    .
    </View>
            )



//Parent
const OnBoardingScreen = () => 

    const flatList = createRef<FlatList<any>>();
    const [currentDisplayingPage, setCurrentDisplayingPage] = useState(0);
    const [selectedTab, setSelectedTab] = useState(0);
    const itemEls = useRef(new Array())

    const [data, setData] = useState([
        
            id: 1,
            value: 
                title: 'Age Group',
                options: [
                     id: 1, value:  left: 'A', right: '18-30'  ,
                     id: 2, value:  left: 'B', right: '31-45'  ,
                     id: 3, value:  left: 'C', right: '45-64'  ,
                     id: 4, value:  left: 'D', right: '65+'  ,
                ],
                singleSelection: true
            
        ,
    ]);

    const renderItem = (item) => 
        return (
            <SelectionOptions
                title=item.value.title
                options=item.value.options
                allowSingleSelection=item.value.singleSelection
                ref=(element) =>  itemsEls[item.id] = element; 
            />
        );
    ;

    return (
        <Container style=styles.container>
                
            <FlatList
                scrollEnabled=false
                style= width: 300 
                horizontal
                pagingEnabled
                showsHorizontalScrollIndicator=false
                data=data
                renderItem=(item) => renderItem(item.item)
                ref=flatList
            />
            <Button onPress=() = 
                for item in each itemsEls 
                    console.log(item.current.selectedItems);
                
             title=“Click Me”/>
            />
        </Container >
    );



export default OnBoardingScreen;

【问题讨论】：

和itemsEls[item.id]你的意思是itemsEls[item.item.id]吗？我建议你在 renderItem 中解构 item：const renderItem = ( item ) => ... 避免每次都出现多余的 item.item

@Milore 感谢关于解构的建议。我更新了我的代码。你现在可以检查并告诉我处理 flatlist 中的 refs 的方法吗？

【参考方案1】：

import React from 'react';
import 
  FlatList,
  Text,
  View,
 from 'react-native';

const Home = () => 
    Data = [
        
            id : 1,
            email : '[e-mail]',
            first_name : 'abc',
        ,
        
          id : 2,
          email : '[e-mail]',
          first_name : 'xyz',
      ,
         
          id : 3,
          email : '[e-mail]',
          first_name : 'pqr',
       ,
        
          id : 4,
          email : '[e-mail]',
          first_name : 'mno',
      ,
         
          id : 5,
          email : '[e-mail]',
          first_name : 'rst',
      
    ]
  const renderDataList = (item) => 
    return (
      <>
        <View style=marginLeft: '10%'>
          <Text style=color: 'red'> item.email</Text>
          <Text> item.first_name</Text>
        </View>
        <View
          style=
            borderColor: 'black',
            borderBottomWidth: 2,
          ></View>
      </>
    );
  ;

  return (
    <>
      <SafeAreaView> 
        <FlatList 
            data=Data 
            renderItem=renderDataList 
            keyExtractor=item=>item.id 
        />
      </SafeAreaView>
    </>
  );
;

export default Home;