通过单击按钮重置选择器

Question

我创建了一个功能组件，我试图通过单击一个按钮来重置或取消选择一个选择器，我试图使用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>
  );
}

运行的代码：

https://snack.expo.io/@rubend151/reset-picker

Answer 1

通过处理onValueChange和设置value，可以使控件成为受控控件。

根据github issue的说法，将值设置为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>
  );
}

https://snack.expo.io/_SweQ21QA