将输入字段的值保存到变量中

Question

我正在尝试构建一个非常基本的登录屏幕 atm 作为未来的入门项目。

一切都在 TypeScript 和 React Native 中完成。

当我尝试使用 OnChangeText 函数时，电子邮件未设置为放入字段中的值，并且 console.log 仍然是“我是 [object Object]”

如何将输入值正确解析到变量中，以便在接下来的代码中正确使用？

对不起这个非常基本的问题，我遵循了一个或多或少只是前端的教程，现在看来我被后端的第一步卡住了：/

如果我理解正确，useState 挂钩应该将 email 声明为字符串（因此是 ''），然后使用 setEmail 将给定值输入到电子邮件中。 onCahngeText 给出的（email）不是这个变量而是输入框的值？

export default function App() {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <LoginWrapper>

      <Text>Enter UserName</Text>
      <LoginInput
        style={styles.text}
        placeholder="username/email"
        onChangeText={(email) => {
          setEmail(email)
          console.log("I am " + email)
        }} />
      <Text>Enter Password</Text>

      <LoginInput
        style={styles.text}
        secureTextEntry
        placeholder="Password"
        onChangeText={(password) => setPassword(password)} />

    </LoginWrapper>
  );
}

编辑：我发现它现在正在工作一半，将输入的名称从电子邮件更改为输入

onChangeText={(input) => {
          setEmail(input)
        }}

但移动键盘在输入单个值后关闭。我不能写“Hello”，因为只有“H”才能通过。这可能只是使用 Expo 的副作用吗？

编辑：LoginInput 的代码

const LoginInput = styled.TextInput`
    //styling
`

Answer 1

如果我没记错的话，onChangeText 事件会返回一个事件处理程序对象。所以你的代码应该是：

<LoginInput
    style={styles.text}
    placeholder="username/email"
    onChangeText={event => {
        setEmail(event.target.value)
    }} 
/>

如果您的 LoginInput 组件是常规的 <input>，这将起作用。

Answer 2

以下是正确执行此操作的示例：https://snack.expo.dev/@zvona/onchangetext-example

您可以通过将useState 设置函数直接传递给onChangeText 事件处理程序来引用它们，因为它的第一个回调参数是来自TextInput 的值。 useEffect 钩子用于显示结果。

示例源码如下：

const App = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  useEffect(() => {
    console.log(`Email: ${email}, password: ${password}`);
  }, [email, password]);

  return (
    <View style={styles.LoginWrapper}>
      <Text>Enter UserName</Text>
      <TextInput placeholder="username/email" onChangeText={setEmail} />
      <Text>Enter Password</Text>

      <TextInput
        secureTextEntry
        placeholder="Password"
        onChangeText={setPassword}
      />
    </View>
  );
};