【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의 값을 지우거나 커서를 놓을 수 있습니다.

응용해, 다른 컴퍼넌트에서도 사용해 주시면 좋겠습니다.

참고문헌