关于 React Native App 中的 this.state 函数

Posted 2023-04-18

【中文标题】关于 React Native App 中的 this.state 函数

【英文标题】：About this.state function in React Native App

【发布时间】：2020-03-18 09:11:15

【问题描述】：

您好，这是我的代码。当我尝试填充文本框时，错误来了，即（'this.setState 不是一个函数。（在 this.setState(emal:email) this.setState is underfined'）。

这是我的代码：

从“反应”导入反应； 进口 图片， 平台， 滚动视图， 样式表， 文本， 可触摸不透明度， 看法， 文本输入， 可触摸高亮， 提醒，

来自'react-native';

导出默认函数 LoginScreen()

  onClickListener = (viewId) => 
    Alert.alert("Alert", "You can't "+viewId);
  

返回 ( https://png.icons8.com/message/ultraviolet/50/3498db'/> this.setState(email)/>

  <View style=styles.inputContainer>
    <Image style=styles.inputIcon source=uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'/>
    <TextInput style=styles.inputs
        placeholder="Password"
        secureTextEntry=true
        underlineColorandroid='transparent'
        onChangeText=(password) => this.setState(password)/>
  </View>

  <TouchableHighlight style=[styles.buttonContainer, styles.loginButton] onPress=() => this.onClickListener('login')>
    <Text style=styles.loginText>Login</Text>
  </TouchableHighlight>

  <TouchableHighlight style=styles.buttonContainer onPress=() => this.onClickListener('restore_password')>
      <Text>Forgot your password?</Text>
  </TouchableHighlight>

  <TouchableHighlight style=styles.buttonContainer onPress=() => this.onClickListener('register')>
      <Text>Register</Text>
  </TouchableHighlight>
</View>

);

const styles = StyleSheet.create(
container: 
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#DCDCDC',
,
inputContainer: 
    borderBottomColor: '#F5FCFF',
    backgroundColor: '#FFFFFF',
    borderRadius:30,
    borderBottomWidth: 1,
    width:250,
    height:45,
    marginBottom:20,
    flexDirection: 'row',
    alignItems:'center'
,
inputs:
    height:45,
    marginLeft:16,
    borderBottomColor: '#FFFFFF',
    flex:1,
,
inputIcon:
  width:30,
  height:30,
  marginLeft:15,
  justifyContent: 'center'
,
buttonContainer: 
  height:45,
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  marginBottom:20,
  width:250,
  borderRadius:30,
,
loginButton: 
  backgroundColor: "#00b5ec",
,
loginText: 
  color: 'white',

);

【参考方案1】：

这就是问题

export default function LoginScreen()

改成

export default class LoginScreen extends Component

【讨论】：

你能格式化你的代码吗？把所有的东西都放在```里，因为我看不懂你展示了什么。你的 this.setState(email) 在哪里？

【参考方案2】：

为了使用状态，它必须是有状态的组件而不是无状态的组件，所以你必须将你的功能组件更改为类。

改变

export default function LoginScreen()

到

export default class LoginScreen extends React.Component

【参考方案3】：

在 react-native setState 函数中有语法

this.setState(someField:someValue)

你在这里使用了错误的语法，你必须给出状态名称和值

this.setState(email)
this.setState(password)

这些行应该像 -

this.setState( email: value )
this.setState(password: value )

【参考方案4】：

如果你想使用函数式组件，你可以像这样使用 UseState 钩子 通过导入和初始化状态，如下所示：

 import React,useState from 'react'; 
    export default function LoginScreen() 
    const [email,setEmail]=useState(initialValues);
    //setEmail function can be used for changing the state
    

use可以在这里看到useState的用法[https://reactjs.org/docs/hooks-state.html]

希望对你有帮助

【参考方案5】：

如果你想使用功能组件，请使用react hooks， 否则使用下面的类组件。

import React,  Component  from 'react';
import  Image, StyleSheet, Text, View, TextInput, TouchableHighlight, Alert  from 'react-native';

export default class LoginScreen extends Component 

  onClickListener = viewId => 
    Alert.alert('Alert', "You can't " + viewId);
  ;

  render() 
    return (
      <View>
        <View style=styles.inputContainer>
          <Image
            style=styles.inputIcon
            source=uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'
          />
          <TextInput
            style=styles.inputs
            placeholder="Password"
            secureTextEntry=true
            underlineColorAndroid="transparent"
            onChangeText=password => this.setState(password)
          />
        </View>

        <TouchableHighlight
          style=[styles.buttonContainer, styles.loginButton]
          onPress=() => this.onClickListener('login')>
          <Text style=styles.loginText>Login</Text>
        </TouchableHighlight>

        <TouchableHighlight
          style=styles.buttonContainer
          onPress=() => this.onClickListener('restore_password')>
          <Text>Forgot your password?</Text>
        </TouchableHighlight>

        <TouchableHighlight
          style=styles.buttonContainer
          onPress=() => this.onClickListener('register')>
          <Text>Register</Text>
        </TouchableHighlight>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#DCDCDC',
  ,
  inputContainer: 
    borderBottomColor: '#F5FCFF',
    backgroundColor: '#FFFFFF',
    borderRadius: 30,
    borderBottomWidth: 1,
    width: 250,
    height: 45,
    marginBottom: 20,
    flexDirection: 'row',
    alignItems: 'center',
  ,
  inputs: 
    height: 45,
    marginLeft: 16,
    borderBottomColor: '#FFFFFF',
    flex: 1,
  ,
  inputIcon: 
    width: 30,
    height: 30,
    marginLeft: 15,
    justifyContent: 'center',
  ,
  buttonContainer: 
    height: 45,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
    width: 250,
    borderRadius: 30,
  ,
  loginButton: 
    backgroundColor: '#00b5ec',
  ,
  loginText: 
    color: 'white',
  ,
);