web-dev-qa-db-ja.com

React NativeでTextInputのフォーカスを外します

AndroidアプリでReact Native。

どうしてTextInputを "unFocus"に強制できますか。つまり、テキストフィールド内でカーソルが点滅します。 isFocused()とonFocus()には関数がありますが、実際にテキストフィールドを取得してフォーカスを放棄するにはどうすればよいですか。 Enterキーを押すと自動的に実行されると思われますが、そうではありません。

   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

}

   })

これはおそらく実際のユーザーにとってはそれほど重要ではありませんが、リロードしたい場合はエミュレートしているだけで、厄介です。

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

より良い方法は* ScrollView *、Keyboard.dismissを使用することだと思います。ユーザーがtextInputの外側をタップしたときに* ScrollView *を使用すると、キーボードが閉じられました。 ScrollViewkeyboardShouldPersistTapsのデフォルトプロパティがneverであるため、完了です。ユーザーが期待する動作です。ユーザーがログインボタンをタップすると、キーボードを閉じるか、同等の方法でtextInputをぼかします。tryLogin関数にKeyboard.dismissed（）を追加します。

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

KeyboardAPIを使用できます。

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

<TextInput
  onSubmitEditing={Keyboard.dismiss}
/>

react native offical document の完全な例を参照してください。

17
F. Huang

実際にそれを見つけました。見た目は美しくありませんが、私の直感では、これはあまり「反応する」ソリューションではありませんが、ここでそれが必要な場合はそうです。

<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

This.refリファレンスでこれを解決できました。まず、次のようにTextInputにrefを割り当てます。

<input ref="myInput" />

次に、関数からthis.refs.myInputにblur（）メソッドを呼び出します

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

上記のノアの答え はうまく機能しますが、文字列参照の使用は Reactでは推奨されていません であり、すぐに廃止される可能性があります。代わりに、参照するコンポーネントがレンダリングされるときに呼び出されるコールバック関数を使用する必要があります。

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

Flowを使用している場合、レンダリング関数の外側に次のようなものを配置することで、refのタイプを指定できます。

textInputRef: ?TextInput;
0
bogan27