1

私は React Native の新人です。学習を始めたばかりです。React Native を使用して Android アプリを構築したいと考えています。

これで、フェッチ要求をサーバーに送信し、ユーザーが承認されているかどうかを示す基本的なログイン フォームができました。

しかし、入力フィールドの値を警告しようとすると、「未定義はオブジェクトではありません」というエラーがスローされます

ここで公式ドキュメントを参照しています。このコードは機能しています。ここで基本的な反応フォームも試しました。入力にUI子猫のテキスト入力を使用しています。ネイティブのreact TextInputも使用しましたが、同じエラーが発生しました。

私の現在のコードは次のとおりです。

import React from 'react';
import { Alert, StyleSheet, Text, TextInput, View } from 'react-native';
import {RkButton, RkText, RkTextInput, RkCard} from 'react-native-ui-kitten';
import Icon from 'react-native-vector-icons/Ionicons';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: ''
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;

    this.setState({
      username: target.username,
      password: target.password
    });
  }


  login()
  {
    Alert.alert(this.state.username) //getting error here

    let data = {
      method: 'POST',
      credentials: 'same-origin',
      mode: 'same-origin',
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password
      }),
      headers: {
        'Accept':       'application/json',
        'Content-Type': 'application/json',
      }
    }
    fetch('http://demourl.com/login',data)
    .then((response) => response.json())
    .then((responseJson) => {
      if (responseJson.success == 'true') {
        Alert.alert('Login Successfull!')
      }
      else {
        Alert.alert('Login Failed')
      }
    })
    .catch((error) => {
      console.error(error);
    });
    ;
  }

  render() {
    return (
      <View style={styles.container}>
        <RkCard style={{padding: 20}}>
          <View style={{alignItems: 'center',padding: 10}}>
            <RkText rkType='warning large' style={{fontSize: 40}}>Log In</RkText>
          </View>
          <View style={{alignItems: 'center',padding: 10}}>
            <RkTextInput placeholder='Username' value={this.state.username} onChange={this.handleChange} />
            <RkTextInput placeholder='Password' value={this.state.password} onChange={this.handleChange}/>
          </View>
          <View style={{alignItems: 'center',padding: 10}}>
            <RkButton rkType='success small' title="Press Me"
              onPress={this.login}
            >Log In!</RkButton>
          </View>
        </RkCard>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 65,
    backgroundColor: '#fff',
    justifyContent: 'center',
    padding: 10
  },
});

作業のどこが理解できていないのか教えてください。または私のコードにバグがあります。前もって感謝します。

4

1 に答える 1

1

loginあなたがしたように関数をバインドするか、次のような関数をhandleChange使用しますarrow

login = () => {
  ...
}

こちらのアロー関数のドキュメントをご覧ください。

これが役立つことを願っています！

于 2018-10-06T07:57:58.413 に答える