官方文档地址 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