我的React Native存在问题。我的应用程序的目的是存储用户输入并在警报中显示值。该应用程序可以在浏览器中正常运行,但在移动设备上运行时不显示值。我在网上寻找解决方案,但似乎找不到与我的问题相关的任何答案。
这是我的代码:
import React, {Component} from 'react';
import { StyleSheet, View, TextInput, Button} from 'react-native';
export default class App extends Component {
constructor() {
super()
this.state = {
firstName: "",
surname: "",
email: "",
password: "",
confirmPassword: ""
}
this.handleChange=this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ [event.target.name] : event.target.value });
}
render(){
return (
<View style={styles.container}>
<TextInput
name="firstName"
placeholder="Name"
firstName={this.state.firstName}
onChange={this.handleChange}
style={styles.textBox}
/>
<TextInput
name="surname"
placeholder="Surname"
surname={this.state.surname}
onChange={this.handleChange}
style={styles.textBox}
/>
<TextInput
name="email"
placeholder="Email"
email={this.state.email}
onChange={this.handleChange}
style={styles.textBox}
/>
<TextInput
name="password"
placeholder="Password"
password={this.state.password}
onChange={this.handleChange}
style={styles.textBox}
secureTextEntry
/>
<TextInput
name="confirmPassword"
placeholder="Confirm password"
confirmPassword={this.state.confirmPassword}
onChange={this.handleChange}
style={styles.textBox}
secureTextEntry
/>
<View >
<Button
onPress={() => {
alert(
'Your details are: \n' +
this.state.firstName + '\n' +
this.state.surname + '\n' +
this.state.email + '\n'
);
}}
title="Register"
color='#ff3333'
width='50'
borderRadius='6'
/>
</View>
</View>
);
}
}
答案 0 :(得分:2)
React Native事件可能与react js事件有些不同。
对于TextInput,
在react native中,事件名称为onChangeText
,它不会返回整个事件。
它将返回直接值。
handleChange(value) {
this.setState({ [value] : value });
}
<TextInput
name="surname"
placeholder="Surname"
surname={this.state.surname}
onChangeText={this.handleChange}
style={styles.textBox}
/>