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

Question

My onPress & onChangeText functions doing nothing. If I entered the value, I got this error message

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

app/index.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() {
    /**/
  }
}

app/screens/SignIn.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>
);

Reference: https://github.com/datomnurdin/auth-reactnative

Answer 1

you are getting this error as SignIn.js js is just a function and not a Component class. so the function's 'this' does not have any method 'setstate'. You need to write the component within a react class like this

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>
    )
  }
}