jd-opensource / jd-opensource/taro-ui

checkbox 组件,options插入新的选项后,onChange事件的idx参数错误

Open
#759 2 comments 0 reactions 1 assignee Claimed by @jimczj View on GitHub
表单组件
Dominant language
TypeScript
Stars
4.7k
Forks
740
PR merge metrics
No merged PRs in 30d

Description

**问题描述**
checkbox的options,插入新的选项之后,onChange事件取到的idx错误

**复现步骤**
```js
this.state={
colors: [{value:1,label:'第二项'}],
checkedColorList: [],
}

setTimeout(()=>{
this.state({colors:[{value:0,label:'第一项'},{value:1,label:'第二项'}]})
},3000)
```

**期望行为**
点击列表中的’第二项‘,第二项的选中状态改变

**报错信息**

点击列表中的’第二项‘,第二项的选中状态不会改变,’第一项的选中状态会改变

**系统信息**

**补充信息**
使用value作为key,idx作为点击方法的参数,在option的value未改变,但是idx改变了(比如,插入一个新的选项,此时,之后的idx都应该+1),在diff的时候,由于key没有改变,所以没有重新进行render,导致绑定的click事件的参数idx错误

onClick事件,不使用idx参数,直接使用option作为参数

return
{ options.map((option) => {
const { value, disabled, label, desc } = option
const optionCls = classNames('at-checkbox__option', {
'at-checkbox__option--disabled': disabled,
'at-checkbox__option--selected': selectedList.includes(value)
})
return





{label}

{desc && {desc}}


})}

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.