Question

您好，这是我的代码。当我尝试填充文本框时，出现错误，即（'this.setState不是函数。（在this.setState（{emal：email）}中this.setState定义不正确'）。

这是我的代码：

从'react'导入React；导入{ 图片，平台， ScrollView， StyleSheet，文本， TouchableOpacity，视图， TextInput， TouchableHighlight，警报

}来自“ 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',
}
});

Answer 1

那是问题

export default function LoginScreen()

将其更改为

export default class LoginScreen extends Component

Answer 2

对于使用状态，它必须是有状态的组件而不是无状态的组件，因此您必须将功能组件更改为Class。

更改

export default function LoginScreen()

到

export default class LoginScreen extends React.Component

Answer 3

在react-native setState函数中具有语法

this.setState({someField:someValue})

您在此处使用了错误的语法，必须提供州名称和值

this.setState({email})
this.setState({password})

这些行应该像-

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

Answer 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可以在[https://reactjs.org/docs/hooks-state.html]

处查看useState的用法

希望这对您有帮助

Answer 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',
  },
});

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

5 个答案: