onChange 不适用于移动设备？ - 反应原生

Question

Right now I am trying to make a Log In Page and I've been using React Native to do so. It works perfectly fine on a web browser but when I try it on my phone, onChange doesn't seem to change the state of the password and username.

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


class LogIn extends React.Component {
    
    constructor(props){
      super(props);
      this.state={
        username: 'John Doe',
        password: 'abc123'
      }
    }
    loginChangeHandler = (event) =>{
      this.setState({[event.target.name]: event.target.value});
    }
  
    loginButtonHandler = () =>{
      
      alert('username: '+this.state.username+ ' Password: '+this.state.password)
    }
    render() {
        return (
         
          <View  style = {{alignItems: 'center'}}>
          
          <TextInput name = 'username' onChange  = {this.loginChangeHandler}
            placeholder = 'username'
            style={{ width: 200, height: 55, borderColor: 'gray', borderWidth: 1 }}
          />
          <Text>{'\n'}</Text>
          <TextInput name = 'password' onChange  = {this.loginChangeHandler} secureTextEntry={true}
            placeholder = 'password'
            style={{ width: 200, height: 55, borderColor: 'gray', borderWidth: 1 }}
          />
          <Text>{'\n'}</Text>
          <TouchableOpacity onPress = {this.loginButtonHandler} style = {{height: 45, width: 200, justifyContent: 'center',  alignItems: "center", backgroundColor: 'green'}}>
          <Text style = {{fontSize: 16, color: 'white'}}>LOG IN</Text>
          </TouchableOpacity>
          
          
          </View>
          
        );
      }
}




export default LogIn;

Answer 1

To use this inside of a function you must bind the function with this object. Other thing is there isn't direct name prop for TextInput component and event.target is not returning something you expected. onChange is called with { nativeEvent: { eventCount, target, text} } , then i suggest you to use onChangeText callback. This callback is called with only the value which you are typing.

Change your code this way.

render() {
        return (
         
          <View  style = {{alignItems: 'center'}}>
          
          <TextInput name = 'username' onChangeText= {(value) => this.setState({ username : value })}
            placeholder = 'username'
            style={{ width: 200, height: 55, borderColor: 'gray', borderWidth: 1 }}
          />
          <Text>{'\n'}</Text>
          <TextInput name = 'password' onChangeText={(value) => this.setState({ password : value })} secureTextEntry={true}
            placeholder = 'password'
            style={{ width: 200, height: 55, borderColor: 'gray', borderWidth: 1 }}
          />
          <Text>{'\n'}</Text>
          <TouchableOpacity onPress = {this.loginButtonHandler.bind(this)} style = {{height: 45, width: 200, justifyContent: 'center',  alignItems: "center", backgroundColor: 'green'}}>
          <Text style = {{fontSize: 16, color: 'white'}}>LOG IN</Text>
          </TouchableOpacity>
          
          
          </View>
          
        );
      }