时间戳

首页 > 解决方案 > 设置状态时反应本机键盘自动关闭/组件重新加载

react-native - 设置状态时反应本机键盘自动关闭/组件重新加载

问题描述

我有一个用于登录用户的表单。

电子邮件和密码状态在App组件中，并传递给Login组件，然后传递给 a ，如下所示：

<TextInput value={text} onChangeText={(e)=> setText(e)}/>

我已经查看了一些解决方案，例如将文本存储在新状态中，然后在输入不活动时设置它，但这仍然有很多错误，因为我有多个输入。有什么办法可以防止键盘隐藏？甚至放置自动对焦也有问题。

标签： react-native

解决方案

您可以使用上下文来共享此状态，而不是将其作为道具传递，因为它会触发一些不需要的渲染，我根据您对项目的解释做了一个小例子。

https://codesandbox.io/s/contextformexample-vrzvy?file=/src/App.js

在示例中，您没有将状态作为道具传递，从而阻止了强制键盘隐藏的渲染，此外，如果您愿意，您仍然可以访问这些值，例如使用组件 LoginScreen 中的钩子“useContext”。

如果上面的链接不起作用，我将分享下面的代码。

import React, { useContext, useState } from "react";
import { Text, View, FlatList, TextInput } from "react-native";

const LoginContext = React.createContext({
  email: "",
  password: ""
});
const LoginProvider = ({ children }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <LoginContext.Provider value={{ email, setEmail, password, setPassword }}>
      {children}
    </LoginContext.Provider>
  );
};

const LoginForm = () => {
  const loginContext = useContext(LoginContext);

  return (
    <View>
      <TextInput
        style={{ borderWidth: 1 }}
        value={loginContext.email}
        onChangeText={loginContext.setEmail}
      />
      <TextInput
        style={{ borderWidth: 1 }}
        value={loginContext.password}
        onChangeText={loginContext.setPassword}
      />
    </View>
  );
};

const LoginScreen = () => {
  return <LoginForm />;
};

const App = () => {
  return (
    <LoginProvider>
      <LoginScreen />
    </LoginProvider>
  );
};

export default App;

提醒一下：在此示例中，我将所有组件和提供程序放在同一个文件中以保持简单，但请注意，您可能应该将其组织在单独的文件中以保持项目清洁。

您的项目成功！

推荐阅读