我创建了一个功能组件，并试图通过单击按钮来重置或取消选择选择器，我尝试使用forceUpdate（），但是没有用。
我正在使用一个名为react-native-picker-select的库
我的代码：
import React, {useState} from 'react';
import { Text, View, StyleSheet, TouchableOpacity} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
export default function App() {
const clean = () => {
//reset picker
}
return (
<View>
<RNPickerSelect
onValueChange={(value) => console.log("value")}
placeholder={{
label: 'Select'
}}
useNativeAndroidPickerStyle={false}
items={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
/>
<TouchableOpacity
onPress={clean}>
<Text>Clean</Text>
</TouchableOpacity>
</View>
);
}
代码运行：
您可以通过处理onValueChange和设置来使控件成为受控控件value。
根据github问题，将值设置为null应该会重置选择，但是不幸的是这似乎不起作用。我将占位符项的值设置为0，以便我们可以正确地休息它。
export default function App() {
const [value, setValue] = React.useState(0);
const clean = () => {
//reset picker
setValue(0) // <-- reset by setting the placeholder value.
}
return (
<View>
<RNPickerSelect
onValueChange={(value) => setValue(value)} // <-- set state manually.
placeholder={{
label: 'Select',
value: 0
}}
useNativeAndroidPickerStyle={false}
items={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
value={value} // <-- use the value from state
/>
<TouchableOpacity
onPress={clean}>
<Text>Clean</Text>
</TouchableOpacity>
</View>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句