wake-up-neo.com

So erhalten Sie Werte, die sich in der Texteingabe befinden, wenn Sie in React Native auf die Schaltfläche klicken

1. index.Android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  TextInput,
  View ,
} from 'react-native';

var styles = require('./Style/customStyle');

import Button from 'react-native-button';
import RadioButton from 'react-native-radio-button'

class AwesomeProject extends Component {

  constructor(props){
    super(props)

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

  render() {
    return (
    <ScrollView style={styles.content}>
      <View style={styles.content}>

        <Text style={styles.welcome}>
          Create Account
        </Text>

        <Text style={styles.textStyle}>
          Name
        </Text>

        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Name"
          returnKeyLabel = {"next"}
          onChangeText={(text) => this.setState({text})}
        />

        <Button style={styles.buttonStyle}>
              Submit
        </Button>

        </View>
      </ScrollView>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
17

Zuerst müssen Sie Ihre Daten in einem Bundesstaat speichern.

beispiel:

<TextInput
          style={styles.textInputStyle}
          placeholder="Enter Name"
          returnKeyLabel = {"next"}
          onChangeText={(text) => this.setState({text})}
/>

Dann müssen Sie eine Funktion übergeben, die ausgeführt wird, wenn Sie auf die Schaltfläche wie folgt klicken:

<Button
        onPress={() => function }>

wiederherstellen Sie Ihren Wert mit: this.state.key

beispiel:

class AwesomeProject extends Component {

  constructor(props){
    super(props)

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

  _handlePress() {
     console.log(this.state.username);
     console.log(this.state.password);
  }

  render() {
    return (
    <ScrollView style={styles.content}>
      <View style={styles.content}>

        <Text style={styles.welcome}>
          Create Account
        </Text>

        <Text style={styles.textStyle}>
          Name
        </Text>

        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Name"
          returnKeyLabel = {"next"}
          onChangeText={(text) => this.setState({username:text})}
        />

        <Text style={styles.textStyle}>
          Name
        </Text>

        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Name"
          returnKeyLabel = {"next"}
          onChangeText={(text) => this.setState({password:text})}
        />

        <Button 
          onPress={() => this._handlePress()}
          style={styles.buttonStyle}>
              Submit
        </Button>

        </View>
      </ScrollView>
    );
  }
}

Ich habe diesen Code nicht getestet, aber er sollte funktionieren

27

Bitte sehen Sie sich das Beispiel unten an:

Richten Sie den Status im Konstruktor ein

constructor(){
 super();
 this.state = {isLoggedIn : false, email :"", password : ""};
}

render-Methode, die beim Laden der Seite aufgerufen wird :

render() {
return (
  <View style={styles.container}>
    <TextInput style={styles.input}
      placeholder = "Username"
      returnKeyType = "next"
      underlineColorAndroid='transparent'
      onChange = {(text) => this.setState({email : text})}
    />
    <TextInput style={styles.input}
      secureTextEntry
      returnKeyType= 'go'
      onChange = {(password) => this.setState({password : password})}

aufruf von onChange und setState von Benutzername und Passwort 

this.setState ({Kennwort: Kennwort})}

      placeholder = "password"/>

    <TouchableOpacity style={styles.clickContainer} onPress=
{this.login.bind(this)}>
      <Text style={styles.buttonText} >Login</Text>
    </TouchableOpacity>
  </View>
);
  }

Login-Methode, um den eingegebenen Benutzernamen und das Passwort abzurufen

login(){
 console.log(this.state.email);
 this.setState({isLoggedIn : true});
}
1
Prayag
<TextInput editable={true} style={{height: 40, borderColor: 'gray', borderWidth: 1}}
   onChangeText={(text1) => this.setState({text1})}
    value={this.state.text1} />

    <Button
        onPress={()=>Alert.alert(this.state.text1)}
        title="Press Me"
        color="#841584"
      />

Das wird es Jungs tun.

0

Sie können einen Wert von state dh this.state.username erhalten.

<Button
    style={styles.textInputStyle}
    onPress={() => console.log(this.state.username)}>
      Submit
</Button>

In Ihrem Bundesstaat haben Sie einen Benutzernamen und ein Kennwort, und in Ihrem Rendern () fragen Sie nach einem Namen. Wenn Sie den Namen wünschen, sollten Sie ihn auch in den Status setzen.

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

Wenn Sie Benutzernamen und Passwort erhalten möchten,

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  TextInput,
  View ,
} from 'react-native';

var styles = require('./Style/customStyle');

import Button from 'react-native-button';
import RadioButton from 'react-native-radio-button'

class AwesomeProject extends Component {

  constructor(props){
    super(props)

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

  onUsernameChange(username) {
     let s = this.state;
     s.username = username;
     this.setState(s);   
  }

  onPasswordChange(password) {
     let s = this.state;
     s.password = password;
     this.setState(s);   
  }

  render() {
    return (
    <ScrollView style={styles.content}>
      <View style={styles.content}>

        <Text style={styles.welcome}>
          Create Account
        </Text>

        <Text style={styles.textStyle}>
          Name
        </Text>

        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Username"
          returnKeyLabel = {"next"}
          onChangeText={this.onUsernameChange}
        />

        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Password"
          returnKeyLabel = {"next"}
          onChangeText={this.onPasswordChange}
        />

        <Button style={styles.buttonStyle}>
              Submit
        </Button>

        </View>
      </ScrollView>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);