이렇게 ref를 생성해 TextInput의 Props로 지정해주면 원하는 컴포넌트의 레퍼런스를 선택할 수 있습니다. TextInput의 레퍼런스에는 다음과 같은 메서드가 구현되어 있습니다.
• .focus(): TextInput에 포커스를 잡아줍니다.
• .blur(): TextInput에 포커스를 해제합니다.
• .clear(): TextInput의 내용을 모두 비웁니다.
제목 TextInput에서 onSubmitEditing Props를 통해 Enter를 눌렀을 때 내용 TextInput으로 포커스해보겠습니다.
components/WriteEditor.js
import React, {useRef} from 'react'; import {View, StyleSheet, TextInput} from 'react-native'; function ({title, body, onChangeTitle, onChangeBody}) { const bodyRef () return ( <View style={styles.block}> <TextInput placeholder="제목을 입력하세요" style={styles.titleInput} returnKeyType="next" onChangeText={onChangeTitle} value={title} onSubmitEditing={() => { bodyRef.current.focus() }} /> (...)
useRef로 선택한 레퍼런스는 .current 값을 조회해 확인할 수 있습니다.
이제 제목을 입력하고 Enter를 눌러보세요. 내용으로 포커스가 이동했나요? (참고로 안드로이드에서 한글을 입력하는 중에 Enter를 누르면 스페이스가 먼저 들어가고, 그다음에 Enter를 한 번 더 눌러야 내용으로 포커스가 이동할 것입니다.)