Событие React Native onChange не работает на мобильных устройствах

Question

У меня проблема с React Native. Цель моего приложения - хранить пользовательский ввод и отображать значения в предупреждении. Приложение работает в браузере, как и должно, но не отображает значения при запуске на мобильном телефоне. Я искал решение в Интернете, но, похоже, не смог найти ответа, соответствующего моей проблеме.

Вот мой код:

import React, {Component} from 'react';
import { StyleSheet, View, TextInput, Button} from 'react-native';

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      firstName: "",
      surname: "",
      email: "",
      password: "",
      confirmPassword: ""  
    }
    this.handleChange=this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ [event.target.name] : event.target.value });
  }

  render(){

    return (
      <View style={styles.container}>
        <TextInput
        name="firstName"
        placeholder="Name"
        firstName={this.state.firstName} 
        onChange={this.handleChange}
        style={styles.textBox}
        />
        <TextInput
        name="surname"
        placeholder="Surname"
        surname={this.state.surname} 
        onChange={this.handleChange}
        style={styles.textBox}
        />
        <TextInput
        name="email"
        placeholder="Email"
        email={this.state.email} 
        onChange={this.handleChange}
        style={styles.textBox}
        />
        <TextInput
        name="password"
        placeholder="Password"
        password={this.state.password} 
        onChange={this.handleChange}
        style={styles.textBox}
        secureTextEntry
        />
        <TextInput
        name="confirmPassword"
        placeholder="Confirm password"
        confirmPassword={this.state.confirmPassword} 
        onChange={this.handleChange}
        style={styles.textBox}
        secureTextEntry
        />

        <View >
          <Button 
          onPress={() => {
            alert(
              'Your details are: \n' +
              this.state.firstName + '\n' +  
              this.state.surname + '\n' +
              this.state.email + '\n' 
              );
          }}
          title="Register"
          color='#ff3333'
          width='50'
          borderRadius='6'
          />
        </View>

      </View>
    );
  }
}

Answer 1

Реакция Native события могут немного отличаться от реакции js события. Для TextInput, в реагировать на родное имя имя события onChangeText, и оно не возвращает все событие. Будет возвращено прямое значение.

 handleChange(value) {
    this.setState({ [value] : value });
  }

 <TextInput
    name="surname"
    placeholder="Surname"
    surname={this.state.surname} 
    onChangeText={this.handleChange}
    style={styles.textBox}
    />