【React Native × Expo】TextInputでRefを使って別コンポーネントからメソッドを呼び出す

今回はReact NativeのTextInputでのRefの書き方についてお伝えしていきたいと思います。

Refを使うことで、TextInputのメソッドを別のコンポーネントからの呼び出しが可能です。

※Refについてはこちらの公式ドキュメントを参照いただければと思います。

以下で実装していきたいと思います。

// 必要最低限のimport
import React, {useState} from 'react';
import {StyleSheet, Button, View, TextInput} from 'react-native';

// 関数コンポーネントを定義
export default function SampleScreen() {
  // 入力値はstateで管理
  const [inputMsg, setInputMsg] = useState('');
  let textInput; // returnの外側で定義
  return (
    <View style={styles.container}>
      <TextInput
        ref={(input) => textInput = input} // 上で定義したtextInputに代入
        style={styles.inputs}
        placeholder='ここに文字を入力してください'
        value={inputMsg}
        onChangeText={(text) => {
          setInputMsg(text);
        }}
      />
      <Button
        title='TextInputの値をクリアする'
        onPress={() => {
          textInput.clear(); // refを使って、メソッドをよびだす
        }}
      />
      <Button
        title='TextInputにフォーカスを当てる'
        onPress={() => {
          textInput.focus();
        }}
      />
      <Button
        title='TextInputのフォーカスを外す'
        onPress={() => {
          textInput.blur();
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inputs: {
    margin: 50,
    padding: 5,
    borderWidth: 1,
  },
});

↓↓実装した結果がこちら↓↓

このようにして、関数コンポーネント内のどこからでもTextInputの値をクリアしたり、カーソルを当てる（外す）ことができました。

応用して、別のコンポーネントでも使用していただければと思います。

参考文献