SHISME / react-native-draggable-grid

A draggable and sortable grid of react-native
320 stars 95 forks source link

无法在renderItem 里面对单个的元素监听点击事件,比如下面代码的onClickDel就监听不到 #93

Open cancan0200 opened 8 months ago

cancan0200 commented 8 months ago

``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 (

) }