Question

我有一个用户登录表单。

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

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

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

Answer 1

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

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;

提醒一下：在这个例子中，为了简单起见，我将所有组件和提供程序放在同一个文件中，但请注意，您可能应该将其组织在单独的文件中以保持项目干净。

您的项目取得成功！

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

1 个答案: