状态未在本机反应中更新?
State isn't Updated in react native?
我从上个月开始使用 React Native 进行开发,我已经完成了一个练习项目,我遇到了一些问题,当我登录并设置状态来更新我的状态时,它没有使用示例用户名和密码进行更新测试。
关于问题的屏幕截图:
这是我的代码:
import React, { Component } from "react";
import { View, StyleSheet, Text, TextInput } from "react-native";
import Button from "./common/Button";
import Card from "./common/Card";
import CardItem from "./common/CardItem";
import Input from "./common/Input";
class Login extends Component {
constructor(props) {
super(props);
this.state = { username: "anas", password: "123" };
}
handleLogin = () => {
console.log(
`Email is: ${this.state.username} and pass is: ${this.state.password} .`
);
};
render() {
return (
<View>
<Card>
<CardItem>
<Input
label="Email: "
placeholder="Enter your Email.."
secureTextEntry={false}
onChangeText={username => this.setState({
username})}
/>
</CardItem>
<CardItem>
<Input
label="Password: "
placeholder="Enter your password.."
secureTextEntry={true}
onChangeText={password => this.setState({ password})}
/>
</CardItem>
<CardItem>
<Button btnTitle="Login" onPressHandle={this.handleLogin}
/>
</CardItem>
<Text>Email: {this.state.username}</Text>
<Text>pass: {this.state.password}</Text>
</Card>
</View>
);
}
}
export default Login;
您的自定义 Input
组件中缺少 onChangeText
属性,因此添加它。
<TextInput
...other props
onChangeText={props.onChangeText}
/>
我从上个月开始使用 React Native 进行开发,我已经完成了一个练习项目,我遇到了一些问题,当我登录并设置状态来更新我的状态时,它没有使用示例用户名和密码进行更新测试。
关于问题的屏幕截图:
这是我的代码:
import React, { Component } from "react";
import { View, StyleSheet, Text, TextInput } from "react-native";
import Button from "./common/Button";
import Card from "./common/Card";
import CardItem from "./common/CardItem";
import Input from "./common/Input";
class Login extends Component {
constructor(props) {
super(props);
this.state = { username: "anas", password: "123" };
}
handleLogin = () => {
console.log(
`Email is: ${this.state.username} and pass is: ${this.state.password} .`
);
};
render() {
return (
<View>
<Card>
<CardItem>
<Input
label="Email: "
placeholder="Enter your Email.."
secureTextEntry={false}
onChangeText={username => this.setState({
username})}
/>
</CardItem>
<CardItem>
<Input
label="Password: "
placeholder="Enter your password.."
secureTextEntry={true}
onChangeText={password => this.setState({ password})}
/>
</CardItem>
<CardItem>
<Button btnTitle="Login" onPressHandle={this.handleLogin}
/>
</CardItem>
<Text>Email: {this.state.username}</Text>
<Text>pass: {this.state.password}</Text>
</Card>
</View>
);
}
}
export default Login;
您的自定义 Input
组件中缺少 onChangeText
属性,因此添加它。
<TextInput
...other props
onChangeText={props.onChangeText}
/>