【React Native × Expo】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,
  },
});

참고문헌