退出时重置输入值

Question

我在我的应用程序中使用本机基本输入字段，如下所示：

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}

Answer 1

Modal 隐藏后仍然挂载，因此数据仍然会在状态中浮动。您可以做的是使用 Effect 以useEffect在 Modal 隐藏时重置状态，“观察”showJourneyDetailsPage状态，例如：useEffect(() => {&nbsp; if (showJourneyDetailsPage) return; // If shown, do nothing&nbsp; setStartingPoint('');&nbsp; setEndingPoint('');&nbsp; // ...}, [showJourneyDetailsPage]);