react native 中的全局 onChange 处理程序

Question

我正在尝试在 react-native 中创建一个全局 onchange 处理程序，但它没有将我的电子邮件和密码的值设置为我尝试在谷歌上搜索的任何内容，但大多数示例都是基于 react.js 而不是 react-native 我将不胜感激立即帮助import React, {useState} from 'react';import {View, Text, Button, TextInput} from 'react-native';import style from './Style';export default function Login() {  const [authDetails, setAuthDetails] = useState({    email: '',    password: '',  });  const {email, password} = authDetails;  const onChange = text =>    setAuthDetails({      ...authDetails,      email: text.email,      password: text.name,    });  const login = () => {    console.log('EMAIL=', email, '\n', 'password =', password);  };  return (    <View>      <TextInput        name="email"        placeholder="Email"        onChangeText={onChange}        value={email}      />      <TextInput        name="password"        placeholder="Password"        onChangeText={onChange}        value={password}      />      <Button title="Login" onPress={login} />    </View>  );}

Answer 1

您的方式可能固定如下：

import React, {useState} from 'react';

import {View, Text, Button, TextInput} from 'react-native';

import style from './Style';

export default function Login() {

  const [authDetails, setAuthDetails] = useState({

    email: '',

    password: '',

  });

  const {email, password} = authDetails;

  const onChange = update =>

    setAuthDetails({

      ...authDetails,

      ...update

    });

  const login = () => {

    console.log('EMAIL=', email, '\n', 'password =', password);

  };

  return (

    <View>

      <TextInput

        name="email"

        placeholder="Email"

        onChangeText={text => onChange({ email: text }) }

        value={email}

      />

      <TextInput

        name="password"

        placeholder="Password"

        onChangeText={text => onChange({ password: text }) }

        value={password}

      />

      <Button title="Login" onPress={login} />

    </View>

  );

}

从上面的代码中可以看出，onChangeText 钩子使用调用它的元素的新文本值调用函数，因此我们仍然需要区分状态中要更新的参数。