退出时重置输入值

Question

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

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

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

这些值包含在视图和模式中。不是任何表格。

输入功能本身工作正常。但是，当我退出页面（如在我的应用程序中单击返回或取消）并返回时，我之前在字段中写入的值仍然存在。每次退出页面时，有什么办法可以重置它们吗？

我的模态是这样的：

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>
  );
};

Answer 1

Modal隐藏后还是挂载的，所以状态下数据还是会浮动的

你可以做的是使用带有 useEffect 的 Effect 来重置模态框隐藏时的状态，"watching" showJourneyDetailsPage 状态，例如：

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

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

退出时重置输入值

Reset Input Values Upon Exiting

javascript

typescript

forms

react-native

native-base