taro react PickerView设置初始值value,选择其它项时会回到初始值项
-
官方文档地址 https://nervjs.github.io/taro/docs/components/forms/picker-view
不是每次都会回到初始值,有时候又是正常的。不设置value就没问题,没法传gif,贴张图片
就是我初始值是20,向上滑动到15,松开,会自动滑动到设置的value值,也就是20,右边的打印显示我确实选择了15,造成了一次更新,
不知道是不是我代码的问题,哪位大佬帮忙看看
代码:import { FC, useState } from 'react' import Taro, { View, PickerView, PickerViewColumn } from '@tarojs/components' import './index.scss' const selector = ['关闭','5', '10', '15', '20'] const timeValue = [99] interface pickerProps { show: boolean, onCancel: () => void, onConfirm: (time) => void, } const TimePicker: FC<pickerProps> = (props) => { const [time, setTime] = useState('') const { show, onCancel, onConfirm} = props if (!show) { return null } const onTimeChange = (e) => { const index = e.detail.value[0] const val = selector[index] console.log('onTimeChange', val) setTime(val) } console.log('TimePicker刷新了') return ( <View className='mesk' catchMove> <View className='time-picker-wrap'> <View className='time-picker'> <View className='time-picker-title'>设置定时时间</View> <PickerView indicatorClass='picker-indicator' className='picker-view' value={timeValue} onChange={(e) => onTimeChange(e)} > <PickerViewColumn> {selector.map(item => { return ( <View className='picker-item'>{item}</View> ); })} </PickerViewColumn> </PickerView> <View className='time-picker-btn-wrap'> <View className='time-picker-btn time-picker-btn__cancel' onClick={()=>onCancel()}>取消</View> <View className='time-picker-line'></View> <View className='time-picker-btn time-picker-btn__enter' onClick={()=>onConfirm(time)}>确定</View> </View> </View> </View> </View> ) } export default TimePicker
环境信息
Taro CLI 3.2.1 environment info: System: OS: macOS 10.15.6 Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.18.3 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.9.0 - /usr/local/bin/npm npmPackages: @tarojs/components: 3.2.1 => 3.2.1 @tarojs/mini-runner: 3.2.1 => 3.2.1 @tarojs/react: 3.2.1 => 3.2.1 @tarojs/runtime: 3.2.1 => 3.2.1 @tarojs/taro: 3.2.1 => 3.2.1 @tarojs/webpack-runner: 3.2.1 => 3.2.1 babel-preset-taro: 3.2.1 => 3.2.1 eslint-config-taro: 3.2.1 => 3.2.1 react: ^17.0.0 => 17.0.2 npmGlobalPackages: typescript: 4.2.4