jd-opensource / jd-opensource/taro-ui
checkbox 组件,options插入新的选项后,onChange事件的idx参数错误
- 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
Assessment
This issue has not been assessed yet.