개발자

react-native의 TextInput에서 입력을 연속되게 하는 방법

2022년 10월 31일조회 954

react-native에서 To Do List를 만드는 연습을 해보고 있습니다. react-native의 컴포넌트들을 사용하다 보니 어렵네요. 웹에서 사용하는 input태그와 react-native의 TextInput태그도 많이 다른것 같아요. TextInput에서 입력을 완료하고 나서 확인을 누르면 연속되게 할 일을 입력할 수 있도록 바로 TextInput으로 focus를 해주려고 합니다. 그런데 확인을 누르면 input영역을 다시 터치해서 focus를 잡아줘야하네요. useRef를 사용해서 onSubmitEditing에서 ref.current.focus()를 해주어도 소용이 없습니다. 혹시 방법이 있을까요??

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

엄홍재님의 프로필 사진

TextInput의 blurOnSubmit props를 설정해 보셨나요? onSubmitEditing에서 무조건 input창에서 blur가 발생하도록 되어있다고 합니다. 그래서 해당 blurOnSubmit을 false로 주면 textinput에 focus가 유지되어 있을 것 같아요! 한번 해보시고 말씀해주세요!! 제가 참고한 링크입니다. - https://joylee-developer.tistory.com/159 - https://reactnative.dev/docs/textinput#bluronsubmit

profile picture

익명

작성자

2022년 11월 01일

오 감사합니다! 잘 되는것 같아요!

승주님의 프로필 사진

아마도 카카오톡과 같은 Send시에 키보드가 닫히지 않는걸 원하시는듯 싶습니다. 해당 방법이 작동하지 않는 원인은 일단 event의 순서 때문입니다. React Native에서 TextInput에 blurOnSubmit이라는 property가 존재하는데 해당 값은 기본적으로 true로 지정이 되어있습니다. 해당 속성은 onSubmit시에 키보드를 자동으로 닫을 것이냐 라는 속성인데 만약 작성자님이 구현하시고자 하는 모양은 현재 닫는 이벤트와 여는 이벤트를 동시에 적용하고 있어서 원하시는 동작이 나오지 않는 겁니다. (이벤트는 하나만 작용합니다.) 그렇기에 키보드가 완전히 닫힌 시점에 input을 focus해주거나, (setTimeout 등) blurOnSubmit이라는 TextInput property값을 falee로 지정해주시면 됩니다 아마 작성자님이 원하시는 방향은 blurOnSubmit을 false로 주는 방향이 아닐까 싶네요

profile picture

익명

작성자

2022년 11월 01일

카오톡과 같은 Send시에 키보드가 닫히지 않는것 이라는 예시가 아주 정확합니다. 말씀하신대로 적용하니까 잘 됩니다. 감사합니다

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!