глобальный обработчик onChange в React Native

Question

Я пытаюсь создать глобальный обработчик onchange в react-native, но он не устанавливает значение моего адреса электронной почты и пароля для того, что я ввел, я пробовал искать в Google, но большинство примеров основаны на response.js, not react-native i буду признателен за немедленную помощь

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 вызывает функцию с новым текстовым значением вызывающего ее элемента, поэтому нам все равно нужно различать, какой параметр обновлять в состоянии.