Zoeeey
Stack flows in you
Zoeeey
  • 분류 전체보기 (155)
    • 💡 UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • 🟨 JavaScript (66)
      • 개념 (42)
      • 정리 (2)
      • 문제풀기 (프로그래머스, 코딩애플) (15)
      • 응용하여 자동화or문제해결하기 (2)
      • 기타 (5)
    • ⚛️ React (49)
      • 개념 (27)
      • 개념(Redux) (3)
      • 정리 (4)
      • 문제풀기 (코딩애플: React) (15)
    • 📘 TypeScript (10)
      • 개념 (8)
      • 문제풀기 (코딩애플) (2)
    • 🌐 HTML,CSS (18)
      • 실무에서 자주 발생한 오류들 (10)
      • 뒤늦게 알아서 뼈아픈 유용한 CSS (6)
      • 기타 자주 쓰는 CSS (2)
    • 💻 CS (8)
      • CS (5)
      • 정규표현식 (2)
      • Git,Github (1)

태그

  • 오류
  • Props
  • 삼항연산자
  • TypeScript
  • useEffect
  • state
  • 프로그래머스
  • JavaScript
  • UXUI
  • Ajax
  • json
  • 코딩애플
  • array
  • object
  • class
  • react
  • CS
  • redux
  • axios
  • CSS
전체 방문자
오늘
어제
hELLO · Designed By 정상우.
Zoeeey
⚛️ React/문제풀기 (코딩애플: React)

React : 숫자가 아닌 걸 치면 alert 뜨는 input 만들기

⚛️ React/문제풀기 (코딩애플: React)

React : 숫자가 아닌 걸 치면 alert 뜨는 input 만들기

2023. 5. 26. 08:02

조건

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())  (1) 2023.05.22
React : 데이터 바인딩해서 컴포넌트로 뿌리기 (템플릿 리터럴 Template literal)  (0) 2023.05.18
  • 조건
  • 풀이
'⚛️ React/문제풀기 (코딩애플: React)' 카테고리의 다른 글
  • React : ajax 상품 불러오기 전 로딩중 만들기
  • React : 더보기 버튼 누르면 ajax axios로 상품 더 가져오기
  • React : 2초 뒤에 사라지는 alert 만들기 (useEffect, 숏서킷평가)
  • React : 가나다정렬되어도 끄떡없는 상세페이지 불러오기 (useParams, find())
Zoeeey
Zoeeey
길게 생각하고 짧게 그리기

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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