如何使用 formik inReact Native 在表單提交上重置 react-native-picker-select？

Question

我正在使用 Formik 和 react-native-picker-select，我可以在提交后重置文本和數字字段，但無法重置 picker-select。 我怎樣才能實現它？

Answer 1

react-native-picker-select的重置值為 null。

所以你需要創建一個 state 來存儲選擇器的當前值，當你想重置它時，將它設置為 null。

這里的秘訣是設置value={state variable}參數，這樣每次 state 也更新時選擇器也會更新。 state variable隨onValueChange更新。

const Component = () => {
  const [pickerValue, setPickerValue] = useState(null);

  return (
    <>
      <RNPickerSelect
        onValueChange={v => setPickerValue(v)}
        value={pickerValue}
        items={[
          {label: 'Football', value: 'football'},
          {label: 'Baseball', value: 'baseball'},
          {label: 'Hockey', value: 'hockey'},
        ]}
      />

      <TouchableOpacity onPress={() => setPickerValue(null)}>
        <Text>Submit</Text>
      </TouchableOpacity>
    </>
  );
};