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

React Native事件可能与react js事件有些不同。对于TextInput，在react native中，事件名称为onChangeText，它不会返回整个事件。它将返回直接值。

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

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