반응형
반응형
🐰: 이미 기존에 구현되어있던 태그 취소 방법은
태그 부분을 한번 더 눌러주면 태그가 삭제되는 방법이였다.
그런데 여기다 Back Space버튼으로도
태그가 삭제되게 해달라는 요청을 받았다..🤪
퇴사한 사람의 코드를 이어서 하면서
코드를 처음부터 하나씩 뜯어 보고 의도를 파악하는게
아직 나에게는 너무 벅차다...🤣
하지만...! 항상 방법은 찾으면 있다는거 ~
//키패드 버튼으로 태그 지우기
const removeTag = (event) => {
if (event.nativeEvent.key === 'Backspace' && comment === '') {
onResetReply && onResetReply();
}
};
<SingpleTextContainer style={{flexShrink: 1}}>
<Row vertical="center">
{((replyItem?.userName || editTargetUser)) && (
//지우고자 하는 대상에 함수 적용
<TopReplyNickNameButton onPress={onRemoveReply}>
<BoldText mr={0}>@{replyItem?.userName || editTargetUser} </BoldText>
</TopReplyNickNameButton>
)}
</Row>
<Row f1>
<SingleTextInput
allowFontScaling={false}
otherNickName={replyItem?.userName || ''}
isActive={isActive}
ref={textRef}
numberOfLines={1}
onChangeText={value => setComment(value)}
onKeyPress={removeTag}
value={comment}
onFocus={() => {
setIsFocus(true);
multiTextRef.current.focus();
}}
editable={boardType !== 'News' ? (isSiren === 0 ? true : false) : true}
placeholder={boardType !== 'News' ? (isSiren === 0 ? (replyItem?.userName ? '' : '댓글을 남겨주세요!') : '댓글기능이 차단되었습니다.'): '댓글을 남겨주세요!'}
/>
</Row>
</SingpleTextContainer>
*전체코드중 일부만 발췌하였습니다.*
- removeTag 함수는 키보드의 키 입력을 처리하는 핸들러로 주로 텍스트 입력 필드에서 된다.
- **event.nativeEvent.key** 를 통해 키보드 이벤트에서 어떤 키가 눌렸는지를 확인 가능하다.
- comment는 댓글이 달리는 내용을 의미하고, onResetReply는 댓글이 리셋 되도록 만들어 놓은 함수이다.
event.nativeEvent.key 사용 참고
https://www.npmjs.com/package/react-native-keyevent?activeTab=readme
react-native-keyevent
Capture external keyboard keys or remote control button events. Latest version: 0.3.2, last published: 6 months ago. Start using react-native-keyevent in your project by running `npm i react-native-keyevent`. There are 3 other projects in the npm registry
www.npmjs.com
🐰: 그럼 이렇게 완성된다-!

반응형
'React Native' 카테고리의 다른 글
[RN] reanimated failed to create a worklet react native.. error (0) | 2024.08.23 |
---|---|
[RN] react-native UseEffect (()=> {},[]); 사용법 (0) | 2024.06.25 |
[RN] react-native Pull Down refresh (0) | 2024.06.13 |
[RN] react-native 'Attempt to invoke virtual method ~' error (Android) (0) | 2024.06.10 |
[RN] react-native Random Array - 랜덤배열 만들기 (0) | 2024.06.10 |