时间戳

首页 > 解决方案 > 当 Tab 更改时，React Native TextInput 值保持不变

javascript - 当 Tab 更改时，React Native TextInput 值保持不变

问题描述

我在最新的 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
  },
});

输入组件.js

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

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

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

演示问题

标签： javascriptreact-nativestatehook

解决方案

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

要在 key prop 中修复此 pass，以便 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

推荐阅读