更改 Tab 时，React Native TextInput 值仍然存在

Question

我在最新的 React Native 中遇到了一个奇怪的问题，当切换选项卡时，组件中文本输入的值仍然存在。

我不知道发生了什么，我认为它应该在选项卡更改时重新呈现，但事实并非如此。

这是我的代码 app.js

export default function App() {
  const [tab, setTab] = useState("TAB1")
  return (
    <View style={styles.container}>
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity
          style={{ borderRadius: 5, borderWidth: 1, marginRight: 5, padding: 20 }}
          onPress={() => setTab("TAB1")}
        >
          <Text>Tab 1</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ borderRadius: 5, borderWidth: 1, padding: 20}}
          onPress={() => setTab("TAB2")}
        >
          <Text>Tab 2</Text>
        </TouchableOpacity>
      </View>
      <View style={{ marginTop: 20}}>
        {
          tab === "TAB1" ? (
            <View>
              <InputComponent tab={tab} />
            </View>
          ) : (
              <View>
                <InputComponent tab={tab} />
              </View>
            )
        }
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 100,
    padding: 10
  },
});

inputcomponent.js

export function InputComponent({ tab }) {
    const [value, setValue] = useState("");

    return (
        <View>
            <Text>{tab}</Text>
            <TextInput placeholder="INPUT HERE"  value={value} onChangeText={setValue}/>
        </View>
    )
}

似乎输入组件重新呈现，但其中的文本输入没有改变。

Demo Issue

Answer 1

这是一个很好的问题。这是因为我们只导入一次并将其传递给两个不同的组件。它更改了选项卡但使用相同的文本输入状态，因为它们使用相同的键。

要在 key 属性中修复此传递，以便 React 知道选项卡已更改：

{
      tab === "TAB1" ? (
        <View>
          <InputComponent key={1} tab={tab} />
        </View>
      ) : (
          <View>
            <InputComponent key={2} tab={tab} />
          </View>
        )
    }

小吃：https://snack.expo.io/mVVLb9uId

了解密钥：https://reactjs.org/docs/lists-and-keys.html#keys

更改 Tab 时，React Native TextInput 值仍然存在

React Native TextInput Value persist when Tab is changed

javascript

hook

state

react-native