antd-mobile中页面更新导致picker自动刷新的问题

最新推荐文章于 2024-02-20 15:00:58 发布

daoke_li

最新推荐文章于 2024-02-20 15:00:58 发布

阅读量1k

点赞数

分类专栏：前端前端移动开发文章标签： react javascript antd antd-mobile

本文链接：https://blog.csdn.net/daoke_li/article/details/106103455

版权

前端同时被 2 个专栏收录

95 篇文章 3 订阅

订阅专栏

前端移动开发

31 篇文章 1 订阅

订阅专栏

由于界面自动刷新，尤其是开了延时后刷新频繁，会导致picker打开后选中的条目自动回到当前value上，此时需禁止自动更新。
如下，在打开picker时，通过onVisibleChange (列改变回调)设置一个临时的tempPickerVal，界面显示期间一直用这个值，点击确定时调用onChange再设置当前pickerVal。

state = {
    isPickerShow: false,
    tempPickerVal: ''
}
onVisibleChange = (pickerVal,v) => {
    this.setState({
        tempPickerVal:pickerVal,
        isPickerShow: v,
    });
}
onPickerChange = (v) => {
    this.setState({
        tempPickerVal:v[0]
    });
}

//render -> return
<Picker onVisibleChange={this.onVisibleChange.bind(this,pickerVal)}
        ……
        value={[isPickerShow ? tempPickerVal : pickerVal]}
        onChange={this.changePicker}
        onPickerChange={this.onPickerChange}>
    <List.Item id="picker"/>
</Picker>}

注意：onPickerChange方法的参数是个数组而不是数值，所以不能直接放入value！