taro react PickerView设置初始值value,选择其它项时会回到初始值项



  • 官方文档地址 https://nervjs.github.io/taro/docs/components/forms/picker-view

    不是每次都会回到初始值,有时候又是正常的。不设置value就没问题,没法传gif,贴张图片
    07d80eff-4093-4d18-b23d-33511462798b-image.png
    就是我初始值是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
    

登录后回复