web-dev-qa-db-fra.com

Comment obtenir les valeurs en entrée de texte lorsque le bouton est cliqué dans React Native

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);
react-nativereact-native-android
17
Vishal Patoliya ツ

Vous devez d'abord stocker vos données dans un état.

exemple:

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

Ensuite, vous devez passer une fonction à exécuter lorsque vous cliquez sur le bouton comme ceci:

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

récupérez votre valeur avec: this.state.key

exemple:

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

Je n'ai pas testé ce code mais cela devrait fonctionner

27
Alexandre Teixeira

Veuillez regarder l'exemple ci-dessous:

Configurer l'état dans le constructeur 

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

Méthode de rendu appelée lors du chargement de la page :

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

call onChange et setState of nom d'utilisateur et mot de passe 

this.setState ({password: mot de passe})}

      placeholder = "password"/>

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

Méthode de connexion pour obtenir le nom d'utilisateur et le mot de passe entrés 

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"
      />

Cela va le faire les gars.

0
Aravind Srinivas

Vous pouvez obtenir une valeur de state i.e this.state.username.

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

Dans votre état, vous avez le nom d'utilisateur et le mot de passe et dans votre render (), vous demandez un nom. Si vous voulez le nom, vous devriez aussi le mettre en l'état.

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

Si vous voulez obtenir un nom d'utilisateur et un mot de passe,

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);
0
Jan Franz Palngipang