javascript - ant design 的checkbox不能选择也不能取消，是什么原因啊？

问题描述

问 题

<Modal width='720px' title="店铺设置"``>

                    {
                    tagList ?
                       <Row>
                           {
                            tagList.map((item,i)=>{
                                if(item.isDefault == 1){
                                return   (<Col span={8} key={i} ><Checkbox  disabled={true} checked={item.isShopHaveTag ? true: false}><img src={JSON.parse(item.tagIcon).src}/>{item.tagName}</Checkbox></Col>)
                                 
                                }else{
                                return  (<Col span={8} key={i}><Checkbox   checked={item.isShopHaveTag ? true:false} ><img src={JSON.parse(item.tagIcon).src}/>{item.tagName}</Checkbox></Col>)  
                                }
                            })
                            }
                       </Row>
                   :''
                    }
                           
                   
                </Modal>

解决方案

React是单向数据流, 你Checkbox的状态只受item.isShopHaveTag的控制. 当你点击Checkbox时, 触发了onChange事件, 但item.isShopHaveTag并没有改变, 所以Checkbox的状态也没有改变.

如果你希望item.isShopHaveTag的值能随Checkbox的操作而改变, 你应当为Checkbox的onChange提供一个函数改变item.isShopHaveTag的值

这篇关于javascript - ant design 的checkbox不能选择也不能取消，是什么原因啊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！