onChange doesn't work with mobile? - React Native

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;

Try using onInput instead, since key events, on Android at least, aren't final, and the result text may change after another key press, like the case in Japanese and Chinese keyboards — Baryo, Jul 15 '20 at 16:05
hello, you should try to bind context this.loginChangeHandler.bind(this) — Nicolas De Tiesenhausen, Jul 15 '20 at 16:07

Chanuka Sandeepa · Accepted Answer · 2020-07-16T08:12:19.780

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>
          
        );
      }

Here's a an article that can make you more realize. https://stackoverflow.com/questions/50726014/why-we-need-to-bind-function-in-react-native — Chanuka Sandeepa, Jul 15 '20 at 17:26
Yes, you have made some other mistakes. I changed the answer. Have a look. — Chanuka Sandeepa, Jul 16 '20 at 00:52

onChange doesn't work with mobile? - React Native

1 Answers1