Сбросить входные значения при выходе - PullRequest
Новая
       94

Сбросить входные значения при выходе

0 голосов
/ 28 апреля 2020

Я использую собственные поля ввода в моем приложении следующим образом: 

const [startingPoint, setStartingPoint] = useState('');
const [endingPoint, setEndingPoint] = useState('');

<Input
  placeholder="My Input Value"
  onChangeText={text => setEndingPoint(text)}
  value={endingPoint}
/>

Эти значения заключены в View и Modals. Не любая форма.

Функция ввода сама по себе работает правильно. Однако, когда я покидаю страницу (как при нажатии или отмене в моем приложении) и возвращаюсь, значения, которые я ранее написал в полях, все еще там. Есть ли способ сбросить их каждый раз, когда я покидаю страницу?

Вот так выглядит мой модал: 

export const JourneyDetailsPage: React.FunctionComponent<JourneyDetailsPageProps> = ({
  toggleShowPage,
  showJourneyDetailsPage,
}) => {
  const [startingPoint, setStartingPoint] = useState('');
  const [endingPoint, setEndingPoint] = useState('');
  const [showAvailableTripsPage, setShowAvailableTripsPage] = useState(false);

  const toggleAvailableTripsPage = () => {
    setShowAvailableTripsPage(showAvailableTripsPage ? false : true);
  };

  return (
    <Modal
      visible={showJourneyDetailsPage}
      animationType="slide"
      transparent={true}>
      <SafeAreaView>
        <View style={scaledJourneyDetailsStyles.container}>
          <View style={scaledJourneyDetailsStyles.searchTopContainer}>
            <View style={scaledJourneyDetailsStyles.searchTopTextContainer}>
              <Text
                onPress={toggleShowPage}>
                Cancel
              </Text>
              <Text>
                Location
              </Text>
              <Text>
                Done
              </Text>
            </View>
            <View>
              <Item rounded style={scaledJourneyDetailsStyles.searchField}>
                <Icon
                  name="map-marker"
                  color="green"
                />
                <Input
                  placeholder="Start"
                  onChangeText={text => setStartingPoint(text)}
                  value={startingPoint}
                />
              </Item>
              <Item style={scaledJourneyDetailsStyles.searchField}>
                <Icon
                  name="search"
                  color="blue"
                />
                <Input
                  placeholder="End"
                  onChangeText={text => setEndingPoint(text)}
                  value={endingPoint}
                />
              </Item>
            </View>

            <View style={scaledJourneyDetailsStyles.offerContainer}>
              <Text style={scaledJourneyDetailsStyles.offerText}
              onPress={() =>
                setShowAvailableTripsPage(true)
              }              
              >Go</Text>
              <Text style={scaledJourneyDetailsStyles.offerText}>1 Person</Text>
            </View>
          </View>
          <AvailableTripsPage
          showAvailableTripsPage={showAvailableTripsPage}
          toggleShowPage={toggleAvailableTripsPage}
        />
        </View>
      </SafeAreaView>
    </Modal>
  );
};

1 Ответ

1 голос
/ 28 апреля 2020

Модал все еще монтируется после того, как он скрыт, поэтому данные все еще будут перемещаться в состоянии.

Что вы можете сделать, это использовать эффект с useEffect для сброса состояния, когда Модал скрыт, «наблюдая» за состоянием showJourneyDetailsPage, например: 

useEffect(() => {
  if (showJourneyDetailsPage) return; // If shown, do nothing

  setStartingPoint('');
  setEndingPoint('');
  // ...
}, [showJourneyDetailsPage]);
...