조건
input에 숫자가 아닌 문자를 치면 alert를 노출한다.
풀이
function Detail(props){
let [alert, setAlert] = useState(true);
let [amount, setAmount] = useState(true);
let handleAmount = (e) => {
let amount = e.target.value;
if(isNaN(amount) === true){
setAmount(false);
} else {
setAmount(true);
};
}
return (
<div className="container">
{ !amount && <Alertamount /> }
<input id="amount" name="amount" onChange={ handleAmount } />
</div>
)
}
function Alertamount(){
return (
<div className="alert alert-warning">
숫자 외에 쓰지 마세요.
</div>
)
}
출처 : 코딩애플 https://codingapple.com/
'⚛️ React > 문제풀기 (코딩애플: React)' 카테고리의 다른 글
React : ajax 상품 불러오기 전 로딩중 만들기 (0) | 2023.05.31 |
---|---|
React : 더보기 버튼 누르면 ajax axios로 상품 더 가져오기 (1) | 2023.05.31 |
React : 2초 뒤에 사라지는 alert 만들기 (useEffect, 숏서킷평가) (0) | 2023.05.23 |
React : 가나다정렬되어도 끄떡없는 상세페이지 불러오기 (useParams, find()) (0) | 2023.05.22 |
React : 데이터 바인딩해서 컴포넌트로 뿌리기 (템플릿 리터럴 Template literal) (0) | 2023.05.18 |