时间戳

首页 > 解决方案 > 如何从地图函数中的 Touchable Opacity 访问单个元素？

javascript - 如何从地图函数中的 Touchable Opacity 访问单个元素？

问题描述

我在我的数组上运行一个 map 函数，它返回 JSX，其中我有一个可触摸的不透明度和一些文本。这样可触摸的不透明度将应用于数组的每个元素。

array.map((item, index) => {
     <TouchableOpacity onPress={someFunction} > 
          <View>
               <Text>{item.data}</Text>
          </View>
     </TouchableOpacity>
)}

考虑我有 4 个数组元素，我想单击一个并更改只有一个（选定）或选定加上另一个可触摸不透明度的背景颜色。我怎样才能做到这一点？

标签： javascriptreact-native

解决方案

您必须为每个元素创建一个 ref，然后在单击时设置样式。这是一个关于零食的工作演示：带功能组件的动态引用

我使用了一个功能组件，但如果您使用的是一个类，这里​​有一个链接向您展示如何实现它：Dynamic ref with Class component

如果 Snack 不起作用，这里是代码：

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';

export default function App() {
  const myRefs = React.useRef([]);

  const items = [
    {
      id:0,
      name:"Item1"
    },
    {
      id:1,
      name:"Item2"
    },
    {
      id:2,
      name:"Item3"
    }
  ];

  const buildView = () => {
      return items.map(item =>{
        return(
          <TouchableOpacity onPress={() => highlight(item.id)}>
            <View ref={el => myRefs.current[item.id] = el}>
              <Text>{item.name}</Text>
            </View>
          </TouchableOpacity>

        )
      });
  }

  const highlight = (itemId) => {
    myRefs.current[itemId].setNativeProps({style: {backgroundColor:'#FF0000'}});
  }

    const resetColors = () => {
        myRefs.current.forEach(ref => 
            ref.setNativeProps({style:{backgroundColor:'transparent'}})
        );
  }

  return (
    <View>
      {buildView()}
      <Button title="Next question" onPress={resetColors} />
    </View>
  );
}

我为每个视图和 onPress 创建了一个参考，我只是改变了它的样式。在方法中做任何你想做的事情highlight。

推荐阅读