react CascaderView组件选择器选择标识不显示问题

对于刚接触react的小白,这个问题缠绕了我好几天,百思不得其解。记录下,希望下次避坑。

使用组件的时候,给initValue赋值之后,选择器就一直出现数据实际已经选上,但是选中标识不显示,并且选择二级数据之后就返回一级的问题。看了官方文档之后说要双向绑定value,但是经过多次尝试还是没能解决。

最终,看到了这个属性

就改变方式,重新给选中项赋值,就完美解决了这个问题。

 <CascaderView
              defaultValue={selectValue}
              options={options}
              onChange={(value, selectedOptions) => {
                console.log(value, selectedOptions, "eeeeee");
                if (mode === "single") {
                  let newInitValue = [];
                  // 只有当选择到二级时才收集数据
                  if (selectedOptions.items.length === 2) {
                    newInitValue = [
                      { value: selectedOptions.items[0].value, label: selectedOptions.items[0].label },
                      { value: selectedOptions.items[1].value, label: selectedOptions.items[1].label },
                    ];
                    setInitValue(newInitValue);
                    onChange?.([...newInitValue]);
                    const CascaderValue = newInitValue ? [newInitValue[0]?.value, newInitValue[1]?.value] : [];
                    setSelectValue(CascaderValue);
                  }
                }
              }}
            />

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值