首页 > 解决方案 > React Native 保存旧的文本输入数据

问题描述

所以我有一个文本输入,每次更改都会保存到 setState 中。但是,如果我点击取消按钮返回一页,然后我回到第一页,我的更改仍然在第一页上。

我觉得这可能是在我的页面上保存缓存或其他内容的手机,但我怎样才能重置这个值?

我也在为我的页面导航使用反应导航

<TextInput
    ref={ref => this.companyNameInput = ref}
    onChangeText={text => { setCompanyNameInput(text); setSaveFlag(true);}}
    style={{
        position: 'absolute',
        left: 150,
        color: 'rgba(0, 159, 150, 1)'

    }}
>
    <Text12
        style={{
            color: 'rgba(0, 159, 150, 1)',
            padding: 0,
            marginBottom: 0
        }}
    >
        {companyNameInput}
    </Text12>

</TextInput>

标签: reactjsreact-nativereact-navigation

解决方案


当您按下取消按钮时,您可以重置您的文本输入

let companyNameInput = null; //if this is functional component else class then use this
const onCancel = () => {
   companyNameInput.clear()
}

或者您可以像这样在当前屏幕的模糊上设置事件侦听器

useEffect(() => {
   const unsubscribe = props.navigation.addListener('blur', () => {
        onCancel();
   })
}. [props.navigation])

你也可以通过这个清除你的状态变量

setCompanyNameInput('');

注意:如果您使用的是类组件,则使用 componentWillUnmount 而不是 useEffect,“this”仅适用于基于类的组件


推荐阅读