webentwicklung-frage-antwort-db.com.de

Deaktivieren Sie eine Texteingabe in React Native

Ich erstelle eine Android App mit React Native.

Wie kann man ein TextInput auf "unFocus" zwingen, dh der Cursor blinkt im Textfeld. Es gibt Funktionen für isFocused() und onFocus(), aber wie bekomme ich eigentlich das Textfeld, um den Fokus aufzugeben. Sie würden denken, dass dies automatisch geschieht, wenn ich die Eingabetaste drücke, aber das ist nicht der Fall.

   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

}

   })

Dies ist wahrscheinlich nicht so wichtig für echte Benutzer, aber ich emuliere nur und es ist lästig, wenn ich neu laden möchte.

18
Noah Mendoza

Ich denke, der bessere Weg ist, * ScrollView *, Keyboard.dismiss zu verwenden. Wenn der Benutzer mit * ScrollView * außerhalb von textInput tippt, wird die Tastatur geschlossen. Dies geschieht, weil ScrollView die Standardeigenschaft für keyboardShouldPersistTapsnever ist. Es ist das Verhalten, das Benutzer erwarten. Wenn Sie die Tastatur schließen oder den Text verwischen möchten, tippen Sie auf die Anmeldeschaltfläche und fügen Sie Keyboard.dismissed () zur tryLogin-Funktion hinzu.

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

Sie können die Tastatur-API verwenden.

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

<TextInput
  onSubmitEditing={Keyboard.dismiss}
/>

Das vollständige Beispiel finden Sie in Natives offizielles Dokument reagieren .

17
F. Huang

Fand es tatsächlich. Es sieht nicht so hübsch aus und meine Intuition sagt, dass dies keine sehr "reaktive" Lösung ist, aber wenn du es hier haben willst, ist es eine.

<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

Ich habe es geschafft, dies mit this.ref Referenz zu lösen. Zunächst weisen Sie dem Texteingang ein ref zu, wie folgt:

<input ref="myInput" />

Dann rufen Sie die blur () -Methode auf, um this.refs.myInput aus einer Funktion

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

Noahs Antwort oben funktioniert gut, aber die Verwendung von String-Refs ist jetzt in React nicht empfohlen und wird wahrscheinlich bald veraltet sein. Verwenden Sie stattdessen eine Rückruffunktion, die aufgerufen wird, wenn die Komponente, auf die Sie verweisen möchten, gerendert wird.

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

Wenn Sie Flow verwenden, können Sie den Typ Ihrer Referenz angeben, indem Sie so etwas außerhalb Ihrer Renderfunktion platzieren:

textInputRef: ?TextInput;
0
bogan27