Skip to content

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

@cancan0200

Description

@cancan0200

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





)
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions