web-dev-qa-db-fra.com

Défocaliser un TextInput dans React Native

Je construis une Android app avec React Native.

Comment pouvez-vous forcer un TextInput à "unFocus", ce qui signifie que le curseur clignote à l'intérieur du champ de texte. Il y a des fonctions pour isFocused() et onFocus(), mais comment puis-je obtenir que le champ de texte abandonne le focus. Vous penseriez que cela se fait automatiquement dès que je frappe, mais ce n'est pas le cas.

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

   var SHA256 = require("crypto-js/sha256");

   export default class LoginForm extends Component{


constructor(props){
    super(props);
    this.state = {
        email: '',
        password:''
    };
}

tryLogin = () => {
    if(this.state.email=="email123" && this.state.password == "password"){
        console.log("password verified");
        this.props.navigator.replace({
            title: 'Dashboard'
        });
    }

    console.log(this.state.email);
    console.log(this.state.password);
    console.log("Hash" + SHA256(this.state.password));
}

render(){
    return(
        <View style={styles.container}>
            <TextInput 
                style={styles.input}

                placeholder="Email address" 
                placeholderTextColor="white"
                onChangeText={(email) => this.setState({email})}>
            </TextInput>
            <TextInput style={styles.input} 
                placeholder="Password" 
                placeholderTextColor="white" 
                secureTextEntry
                onChangeText={(password) => this.setState({password})}>
            </TextInput>

            <TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}>
                <Text style={styles.loginButtonText}>LOGIN</Text>
            </TouchableOpacity>
        </View>
  );
}
}

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

const styles =  StyleSheet.create({
container: {
    padding: 20
},
input:{
    height: 40,
    backgroundColor: '#e74c3c',
    marginBottom: 20,
    color: 'white',
    paddingHorizontal: 15,
    opacity: .9
},
loginButtonContainer:{
    justifyContent: 'center',
    backgroundColor: '#bc4c3c',
    paddingVertical:15

},
loginButtonText:{
    textAlign:'center',
    color:'white',
    fontWeight: '700',
    fontSize: 24

}

   })

Cela n'importera probablement pas autant pour les vrais utilisateurs, mais je ne fais que l'imiter et c'est embêtant si je veux recharger.

androidreact-nativefocususer-inputreact-native-android
18
Noah Mendoza

Je pense qu'une meilleure façon est d'utiliser * ScrollView *, Keyboard.dismiss. En utilisant * ScrollView * lorsque l'utilisateur appuie en dehors de textInput, le clavier est désactivé. C'est fait parce que ScrollView la propriété par défaut de keyboardShouldPersistTaps est jamais. C'est le comportement attendu par l'utilisateur. Pour ignorer le clavier ou son équivalent, le texte est flou. Lorsque l'utilisateur appuie sur le bouton de connexion, ajoutez Keyboard.dismissed () à la fonction tryLogin.

import React, {Component} from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableOpacity, ScrollView, Keyboard}
  from 'react-native';
var SHA256 = require("crypto-js/sha256");

export default class LoginForm extends Component{


  constructor(props){
    super(props);
    this.state = {
      email: '',
      password:''
    };
  }

  tryLogin = () => {
    Keyboard.dismiss();
    if(this.state.email=="email123" && this.state.password == "password"){
      console.log("password verified");
      this.props.navigator.replace({
        title: 'Dashboard'
      });
    }

    console.log(this.state.email);
    console.log(this.state.password);
    console.log("Hash" + SHA256(this.state.password));
  }

  render(){
    return(
      <ScrollView style={styles.container}>
        <TextInput
          style={styles.input}

          placeholder="Email address"
          placeholderTextColor="white"
          onChangeText={(email) => this.setState({email})}>
        </TextInput>
        <TextInput style={styles.input}
                   placeholder="Password"
                   placeholderTextColor="white"
                   secureTextEntry
                   onChangeText={(password) => this.setState({password})}>
        </TextInput>

        <TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}>
          <Text style={styles.loginButtonText}>LOGIN</Text>
        </TouchableOpacity>
      </ScrollView>
    );
  }
}

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

const styles =  StyleSheet.create({
  container: {
    padding: 20
  },
  input:{
    height: 40,
    backgroundColor: '#e74c3c',
    marginBottom: 20,
    color: 'white',
    paddingHorizontal: 15,
    opacity: .9
  },
  loginButtonContainer:{
    justifyContent: 'center',
    backgroundColor: '#bc4c3c',
    paddingVertical:15

  },
  loginButtonText:{
    textAlign:'center',
    color:'white',
    fontWeight: '700',
    fontSize: 24

  }

})
26
Meysam Izadmehr

Vous pouvez utiliser une API de clavier .

import { Keyboard, TextInput } from 'react-native';

<TextInput
  onSubmitEditing={Keyboard.dismiss}
/>

S'il vous plaît voir l'exemple complet dans réagir document officiel natif .

17
F. Huang

Je ne l'ai pas aussi jolie et, selon mon intuition, ce n'est pas une solution très efficace, mais si vous le voulez ici, c'est le cas.

<TextInput 
 style={styles.input} 
 ref="email_input"
 onSubmitEditing={() => this.refs['email_input'].blur()} 
 placeholder="Email address" 
 placeholderTextColor="white"
 onChangeText={(email) => this.setState({email})}/>
6
Noah Mendoza

J'ai réussi à résoudre cela avec cette référence. Tout d'abord, vous affectez à TextInput un ref, comme ceci:

<input ref="myInput" />

Ensuite, vous appelez la méthode blur () à this.refs.myInput d'une fonction

 blurTextInput(){
    this.refs.myInput.blur()
 }
5
Adrian

La réponse de Noé ci-dessus fonctionne bien, mais l'utilisation de la référence de chaîne est maintenant déconseillée dans React , et sera probablement obsolète bientôt. Au lieu de cela, vous devez utiliser une fonction de rappel appelée lorsque le composant que vous souhaitez référencer rend.

<TextInput 
  ref={(c: any) => {
    this.textInputRef = c;
  }}
  onSubmitEditing={() => this.textInputRef.blur()} 
/>

Si vous utilisez Flow, vous pouvez ensuite spécifier le type de votre référence en plaçant quelque chose comme ceci en dehors de votre fonction de rendu:

textInputRef: ?TextInput;
0
bogan27