如何从函数中获取状态

Question

如何从函数中获取类的状态？

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Alert
} from 'react-native';
export default class LoginScreen extends Component {
constructor(props) {
super(props);
this.state={
telephone: '',
password: ''
}
this.onLogin=this.onLogin.bind(this);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title} >Login</Text>
<View style={styles.form}>
<TextInput onChange={(e) => this.setState({telephone: 
e.target.value})}
value={this.state.telefon} keyboardType='numeric' maxLength={9} 
returnKeyType='next' underlineColorAndroid="#BAAC9A" style=
{styles.telinput} placeholder="Telephone"></TextInput>
<TextInput onChange={(e)=>{this.setState({password: 
e.target.value})}}
value={this.state.password} style={styles.passinput}  
secureTextEntry returnKeyType='send'   placeholder="Password">
</TextInput>
</View>
<TouchableOpacity style={styles.buttoncontainer} onPress=
{this.onLogin} >
<Text style={styles.buttontext}>LOGIN</Text>
</TouchableOpacity>
<Text style={styles.subtext}>Not registered?</Text>
</View>
)
}
onLogin() {
var {telephone, password} = this.state;
alert('telephone='+ encodeURIComponent(telephone)+'&password='+ 
encodeURIComponent(password));
}
}
..styles

在警报框中，我得到电话=未定义&密码=未定义。 我还尝试制作onLogin箭头函数(在构造函数中没有绑定)，甚至没有显示警报。 问题是如何在onLogin函数中获取状态(没有Redux)以及为什么警报不适用于箭头函数

Answer 1

在您的代码中，我看到您正在使用带有 e.target.value 的TextInput

<TextInput onChange={(e) => this.setState({telephone: 
e.target.value})}

使用 event.target.value 对 Web 平台有意义。

官方文档 https://facebook.github.io/react-native/docs/textinput.html 说要像这样使用文本输入。没有 event.target.value。

<TextInput
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>

Answer 2

您正在尝试访问onChange处理程序中的更改事件并从e.target.value读取值。虽然这在浏览器中有效，但您是在 React Native 的本机空间中工作，并且无法访问传统的 ReactSyntheticEvent。相反，API 中的<TextInput />组件将text公开为传递给onChangeText方法的值。这相当于浏览器中的e.target.value，只是引擎盖下的不同实现。将setState调用更改为如下所示：

<TextInput onChangeText={(text)=>{this.setState({password: text})}} />;

这应该相应地更新您的state，您应该能够在onLogin中访问它。

关于使用箭头函数进行onLogin，您需要为类属性转换进行特定的babel配置(此功能仍处于第 2 阶段)。这个插件应该可以解决问题：https://babeljs.io/docs/plugins/transform-class-properties/

Answer 3

我在你的代码上看到了一些小错误，我很快就在 Snack 上写了一个工作示例： https://snack.expo.io/@zvona/a-simple-login-form

检查与您的代码相比是否存在一些差异。