onPress 和 onChangeText 在 React Native 中什么都不做

Question

我的onPress和onChangeText函数什么都不做。如果我输入了该值，则收到此错误消息

_this.setState is not a function. (In '_this.setState({
          username: username
        })', '_this.setState' is undefined)

应用/索引.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "", 
      password: ""
    };
    this._handlePress = this._handlePress.bind(this)
  }
  _handlePress = () => {
     const { username } = this.state;
     const { password } = this.state;
     Alert.alert(username);
     Alert.alert(password);
     onSignIn().then(() => navigation.navigate("SignedIn")); //also not working
  }
  /**/
  render() {
    /**/
  }
}

应用/屏幕/登录.js

import React from "react";
export default ({navigation, _handlePress}) => (
  <View style={{ paddingVertical: 20 }}>
    <Card title="SIGN IN">
      <FormLabel>Email</FormLabel>
      <FormInput 
        placeholder="Email address..." 
        onChangeText={username => this.setState({username})}
      />
      <FormLabel>Password</FormLabel>
      <FormInput 
        secureTextEntry 
        placeholder="Password..." 
        onChangeText={password => this.setState({password})}
      />
      <Button
        buttonStyle={{ marginTop: 20 }}
        backgroundColor="#03A9F4"
        title="SIGN IN"
        onPress={this._handlePress}
      />
    </Card>
  </View>
);

参考资料：https://github.com/datomnurdin/auth-reactnative

Answer 1

您收到此错误作为登录.js js 只是一个函数，而不是一个组件类。 所以函数的"this"没有任何方法"setState"。你需要在这样的反应类中编写组件

class Signin extends React.Component{
  <View style={{ paddingVertical: 20 }}>
      <Card title="SIGN IN">
        <FormLabel>Email</FormLabel>
        <FormInput 
          placeholder="Email address..." 
          onChangeText={username => this.setState({username})}
        />
        <FormLabel>Password</FormLabel>
        <FormInput 
          secureTextEntry 
          placeholder="Password..." 
          onChangeText={password => this.setState({password})}
        />
        <Button
          buttonStyle={{ marginTop: 20 }}
          backgroundColor="#03A9F4"
          title="SIGN IN"
          onPress={this._handlePress}
        />
      </Card>
    </View>
}

Answer 2

// i have cloned your repo and run it successfully, by moving username 
// and password from index.js to SignIn.js, rewrite SignIn in class way, 
// navigation works well(jump to signed successfuly after pressing). 
// however not sure if this is what you need.
import React, {Component} from "react";
import { View, Alert } from "react-native";
import { Card, Button, FormLabel, FormInput } from "react-native-elements";
export default class SignIn extends Component {
  constructor (props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    }
  }
  _handlePress () {
    let {navigation} = this.props;
    navigation.navigate("SignedIn")
  }
  _handleUChange (username) {
    this.setState({username})
  }
  _handlePChange (password) {
    this.setState({password})
  }
  render () {
    return (
      <View style={{ paddingVertical: 20 }}>
        <Card title="SIGN IN">
          <FormLabel>Email</FormLabel>
          <FormInput 
            placeholder="Email address..." 
            onChangeText={this._handleUChange.bind(this)}
          />
          <FormLabel>Password</FormLabel>
          <FormInput 
            secureTextEntry 
            placeholder="Password..." 
            onChangeText={this._handlePChange.bind(this)}
          />
          <Button
            buttonStyle={{ marginTop: 20 }}
            backgroundColor="#03A9F4"
            title="SIGN IN"
            onPress={this._handlePress.bind(this)}
          />
        </Card>
      </View>
    )
  }
}