반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- react
- 게임용어
- 2번실행
- useRef에러
- onchange
- Git
- react에러
- MutableRefObject
- StrictMode
- 원격
- 로컬
- KeyboardEvent
- nextjs
- OBT
- 깃 브랜치 삭제
- ts2322
- console.log
- branch
- changeEvent
- reactStrictMode
- onkeypress
- 알파테스트
- useref
- delete branch
- typescript
- event type
- FGT
- reactjs
- undefine
- useEffect
Archives
- Today
- Total
min.js
[React] 리액트 'Enter' 키 이벤트 enter key event typescript 본문
반응형

버튼을 클릭하면 메시지 전송이 되지만,
키보드의 엔터키를 눌렀을 때도 전송이 되게 하기 위해서는,
input의 onKeyPress 속성 사용!
자세한 건 아래 코드에서 확인:)
import React, { useRef, useState, ChangeEvent, KeyboardEvent } from 'react';
function InputBox() {
const [text, setText] = useState<string>('');
const inputRef = useRef<HTMLInputElement>(null);
const onChange = (e: ChangeEvent<HTMLInputElement>) => {
setText(e.target.value);
};
const handleMessage = () => {
if (text === '') {
return alert('전송할 메시지를 입력해주세요:)');
}
// 메시지 전송하는 부분 구현
// setText(''); // 메시지 전송 후 input 빈값으로 수정
// inputRef?.current?.focus(); // 메시지 전송 후 input 포커스
};
const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleMessage();
}
};
return (
<Container>
<input
placeholder="메시지를 입력하세요"
onChange={onChange}
value={text}
ref={inputRef}
onKeyPress={handleKeyPress}
/>
<button onClick={handleMessage}>
<Send /> //메시지 아이콘
</button>
</Container>
);
}
export default InputBox;
반응형
'React' 카테고리의 다른 글
react useEffect 2번 실행되는 문제 (0) | 2024.01.30 |
---|---|
react useRef 에러 TS2322 MutableRefObject<undefined> (0) | 2024.01.30 |