jd-opensource / jd-opensource/taro-ui

Taro-UI 3.0.0-alpha.3 AtImagePicker删除图片触发选择图片功能

Open
#1,170 14 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.7k
Forks
740
PR merge metrics
No merged PRs in 30d

Description

**问题描述**

Taro-UI 3.0.0-alpha.3 AtImagePicker删除图片触发选择图片功能

**复现步骤**

```js
import React, { useEffect, useRef, useState } from 'react'
import { Canvas, View } from '@tarojs/components'
import { AtImagePicker } from 'taro-ui'
import { setGlobal } from '@config/global'
import PropTypes from 'prop-types'
import { scaleImgArr, showImg } from './util'
function UpLoadImage({ sty, files, showAddBtn, count, length, label, required, error, tip, onChange, children }) {
const isSingle = count === 1
const imgs = useRef([])
const viewEl = useRef(null)
const [items, setItems] = useState([])

useEffect(() => {
setGlobal('userHideope', 'chooseImage')
if (!files) {
onChange(isSingle ? '' : [])
return
}
const url = []
const arr = []
files.forEach(item => {
if (item) {
url.push(item.url || item)
arr.push(item.url ? item : { url: item })
}
})
imgs.current = url
setItems(arr)
onChange(isSingle ? arr[0] || '' : arr)
}, [files])

return (

{label &&

{label}

}

{children}

{
setGlobal('userHideope', 'chooseImage')
console.log(111, ope, items, index)
if (ope === 'remove') {
items.splice(index, 1)
setItems([...items])
return false
}
console.log(222)
if (!imgFiles.length) {
setItems([])
onChange(isSingle ? '' : [])
return
}

const arr = isSingle ? [imgFiles[imgFiles.length - 1]] : imgFiles.slice(0, count)
setItems(arr)
scaleImgArr(viewEl, arr, 0, (imgArr) => {
imgs.current = imgArr
onChange(isSingle ? arr[0] : arr)
})
}}
onImageClick={index => showImg(index, imgs.current)}
/>
{tip &&
{tip}
}

{error &&

}

)
}

UpLoadImage.propTypes = {
sty: PropTypes.string,
files: PropTypes.array,
showAddBtn: PropTypes.bool,
count: PropTypes.number,
length: PropTypes.number,
label: PropTypes.string,
required: PropTypes.bool,
error: PropTypes.bool,
tip: PropTypes.string,
onChange: PropTypes.func,
children: PropTypes.object
}

UpLoadImage.defaultProps = {
sty: 'at-input',
files: [],
showAddBtn: true,
count: 10,
length: 4,
onChange: () => {
}
}

UpLoadImage.options = {
addGlobalClass: true
}

export default UpLoadImage
```

**期望行为**

删除的时候不要触发图片选择

**报错信息**

**系统信息**

Taro v3.0.7
Taro UI v3.0.0-alpha.3
平台 weapp

**补充信息**

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied UpLoadImage example with AtImagePicker on the weapp platform using Taro v3.0.7 and Taro UI v3.0.0-alpha.3. Trace the AtImagePicker onChange path when an image is removed and verify that deletion no longer opens image selection while adding an image still does.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.