[RN] react-native 댓글태그 지우기, Comments Tag remove, Back Space

2024. 6. 24. 11:15·React Native
반응형
반응형

🐰: 이미 기존에 구현되어있던 태그 취소 방법은

태그 부분을 한번 더 눌러주면 태그가 삭제되는 방법이였다.

 

그런데 여기다 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

 

 

🐰: 그럼 이렇게 완성된다-!

디바이스 키패드 back space로 댓글 태그 지우기
댓글 tag 키패드 Back Space로 지우기

 

반응형

'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
'React Native' 카테고리의 다른 글
  • [RN] reanimated failed to create a worklet react native.. error
  • [RN] react-native UseEffect (()=> {},[]); 사용법
  • [RN] react-native Pull Down refresh
  • [RN] react-native 'Attempt to invoke virtual method ~' error (Android)
nicee
nicee
답을 찾아가는 과정이 즐거운 프론트엔드 개발자의 기록
    반응형
  • nicee
    나의 개발일지
    nicee
  • 글쓰기 관리
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Project01 [Chat App]
      • React Native
      • Git
      • Program Setting
      • nicee-day
      • Study
        • C++
  • 블로그 메뉴

    • 링크

      • 🌳 git키우기
      • 📚 일상기록
    • 공지사항

    • 인기 글

    • 태그

      firebase
      typescript
      rn
      React
      k직장인
      타입스크립트
      Android
      티스토리챌린지
      Xcode
      next.js
      공부
      직장인짤
      앱개발
      리액트
      백준코딩테스트
      오블완
      React-native
      채팅앱
      불금
      에러해결
      c++
      error
      nextjs
      k직장인일상
      APP
      빌드에러
      app build
      리액트네이티브
      커피수혈
      IOS
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.0
    nicee
    [RN] react-native 댓글태그 지우기, Comments Tag remove, Back Space
    상단으로

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.