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 事件有点不同。对于文本输入，在 React Native 中，事件名称是 onChangeText 而不是 return 整个事件。它将 return 直接值。

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

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

React Native onChange 事件在移动设备上不起作用

React Native onChange event doesn't work on mobile

browser

mobile

onchange

react-native