ㅇ

모달창에 시간 입력 부분을 구현 하는 중. 

 

일단 validation부분인데.. 흠. 처음에는 

 

  let hour = Number(e.target.value);
    if (!hour || hour < 1 || hour > 24) {
      alert('시간은 1~24 사이의 숫자로 입력해주세요');
    }

해서 알럿을 띄웠더니 'dddd'같은 경우 알럿이 8번이나 뜨는 불편한 상황 발생. 

그래서  html type="number"를 해주었더니 1번밖에 입력이 되지 않지만, 입력이 아예 방지되서 유저에게 안내 메세지가 나타나지 않는다.. ㅋ.. 아예 입력 자체가 안되게 하고 싶은뎅. 

 

developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

그리고 min값을 주면 그냥 화살표 부분이 제한 될 뿐. 실제 입력이 제한 되지는 않는다.

 

이 값을 쓰면 리액트에서는 onChange를 통해서 제어해주어야 하기 때문에.. +1씩 되는 변경사항과 맞물려서 동작하지 않는다.

그냥 string으로 처리하기로.

    let newhour = Number(e.target.value);

    if (!newhour && newhour !== 0) {
      console.log('newhour', newhour);
      alert('시간은 1~24 사이의 숫자로 입력해주세요');
    }