无法在renderItem 里面对单个的元素监听点击事件,比如下面代码的onClickDel就监听不到
``import React, { useState } from 'react' import { DraggableGrid } from 'react-native-draggable-grid' import { getImageUrl } from '@utils' import { ScrollView } from '@tarojs/components' import _ from 'lodash'
import './index.rn.scss' import { View, Text, Image } from 'react-native'
export default function Drag(props: any) { const { handleClickAdd, handleClickDel, tabList } = props const [folderList, setFolderList] = useState(tabList)
const getTabName = (tab) => { return tab.folderName && tab.folderName.length > 5 ? tab.folderName.substr(0, 5) + '...' : tab.folderName }
const onItemPress = (item) => { console.log('item', item) if (item.folderId === 'add') { // 新增文件夹 handleClickAdd && handleClickAdd() } } const onClickDel = (item) => { handleClickDel && handleClickDel(item) } const renderItem = (item: any, order: number) => { const name = getTabName(item) const style = {}
if (order % 4 === 0) {
style.borderLeftWidth = 1
}
if (order === 0 || order === 1 || order === 2 || order === 3) {
style.borderTopWidth = 1
}
if (item.folderId === 'add') {
style.borderWidth = 0
}
return (
<View
key={item.key}
className='drag-item'
style={style}
>
{item.key !== 'add' && <View className="drag-item-box" >
<Text className='drag-item-text'>{name}</Text>
</View>
}
{/* */}
{item.key !== 'add' && <View className='drag-item-box-del' onClick={(item) => onClickDel(item)}>
<Image className='drag-item-box-del-img' src={require('@assets/images/icon_upload_gray.png')} />
</View>}
{item.key === 'add' && <View className='drag-item-add'>
<Image className='drag-item-add-img' source={require('@assets/images/icon_upload_gray.png')} />
</View>
}
</View>
)
}
const onDragRelease = (data) => { const { onDragRelease } = props setFolderList(data) onDragRelease && onDragRelease(data) } const dataList = _.cloneDeep(folderList).filter(item => item.folderId !== '*').map(item => { return { ...item, key: item.folderId } })
dataList.push({ folderId: 'add', disabledDrag: false }) return ( <View className='drag-wrapper'> <ScrollView scrollY scrollWithAnimation showsVerticalScrollIndicator={false} overScrollMode="never" removeClippedSubviews={true} className='drag-list' > <DraggableGrid numColumns={4} renderItem={renderItem} data={dataList} onDragRelease={onDragRelease} onItemPress={onItemPress} /> </ScrollView> </View> ) }