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

Question

现在我正在尝试制作一个登录页面，并且我一直在使用 React Native 来做到这一点。它在网络浏览器上运行良好，但是当我在手机上尝试时，onChange 似乎并没有改变密码和用户名的状态。

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

要在函数内部使用this，您必须将函数与this 对象绑定。另一件事是name 组件没有直接的name 属性，并且event.target 没有返回您期望的内容。 onChange 用{ nativeEvent: { eventCount, target, text} } 调用，那么我建议你使用onChangeText 回调。仅使用您输入的值调用此回调。

以这种方式更改您的代码。

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