Onchange处理程序对此没有响应.setState(｛userName:event.target.value｝)用户

Question

按下登录按钮后，警报应显示为用户名："输入值"；和密码："；输入值；。但现在它显示用户名：未定义，密码：未定义。我该怎么解决这个问题

export default class Login extends Component{

state={userName:"",password:""}
setUName=(event)=>{
this.setState({userName:event.target.value})
}
setPW=(event)=>{
this.setState({password:event.target.value})
}
onSubmit=(event)=>{
event.preventDefault()
const {userName,password}=this.state;
alert(`Username:${userName},Password:${password}`);
}
render(){

return (
<ImageBackground source={require('../../src/login.png')} style={styles.container}>
<View style={styles.logoContainer}>
<Text style={styles.header}>
Welcome
</Text>
</View>

<View>
<View style={styles.inputContainer}>
<TextInput style={styles.txtInput}
placeholder='Username'
returnKeyType='next'
onChange={this.setUName}
/>

<TextInput style={styles.txtInput}
placeholder='Password'
returnKeyType='next'
secureTextEntry
onChange={this.setPW} 
/>

</View>

Answer 1

在react native中，您可以从TextInput组件的onChangeText道具中获取值。

试试这个

setUName=(value)=>{
this.setState({userName:value})
}

<TextInput style={styles.txtInput}
placeholder='Username'
returnKeyType='next'
onChangeText={this.setUName}
/>

Answer 2

无需在OnChange上传递函数，用替换您的OnChange属性

<TextInput style={styles.txtInput}
placeholder='Username'
returnKeyType='next'
onChangeText={userName=> this.setState({ userName})}
/>

Answer 3

看起来您使用的是TextInput，它可能是自定义创建的，也可能来自某个样式库。您应该记录一次参数并检查值的确切位置，所以尝试下面的代码并在控制台中检查，您就会知道下一步该怎么做。

setUName=()=>{
console.log(arguments)
}

它总是console.log(arguments)的最佳调试实践，因为在某些库中，这些事件是customEvents，值在第二个或第三个参数中。