Notice
Recent Posts
Recent Comments
Link
«   2025/03   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Tags
more
Archives
Today
Total
관리 메뉴

juni

WelKo_닉네임 수정 본문

프로젝트/WelKo

WelKo_닉네임 수정

juni_shin 2024. 8. 4. 03:19
        <input
          className="w-full rounded-2xl border bg-grayscale-50 p-[16px] text-black"
          type="text"
          placeholder="Write your nickname"
          value={nickname}
          onChange={(e) => setNickname(e.target.value)}
        />

 

        <input
          className="w-full rounded-2xl border bg-grayscale-50 p-[16px] text-black"
          type="text"
          placeholder="Write your nickname"
          defaultValue={nickname}
          onBlur={(e) => setNickname(e.target.value)}
        />

닉네임이 입력을 끝냈을 때만 바뀌도록 하려면 onChange 대신 onBlur 이벤트를 사용해야 합니다. onBlur 이벤트는 사용자가 입력 필드를 벗어날 때 트리거됩니다

 

입력하는 동안에는 바뀌지 않고 필드를 벗어났을 경우에만 setNickname이 변경

'프로젝트 > WelKo' 카테고리의 다른 글

WelKo_채팅 확인 여부 구현  (0) 2024.08.07
WelKo_중간 발표 및 피드백  (0) 2024.08.05
WelKo_찜 카테고리  (0) 2024.08.02
WelKo_채팅 목록 및 예약자 명단  (0) 2024.08.01
WelKo_채팅 로직 개선  (0) 2024.07.30