TextField에 숫자만 입력되게 하기

TextField를 작성하는 중에

숫자만 입력되게 바꿔야 하는 경우가 있었습니다.

3가지 방법을 시도해서 해결했고, 그 과정을 공유하고자 합니다.

 

첫번째로는 API에 있는 type을 사용했습니다.

<TextField type='number'/> 이런 식으로 하였는데

문제는 'e'가 입력이 됐습니다.

2e5 라고 쓰면 20000이었나? 이런 수치가 되는데

e를 이용해서 큰 숫자를 쉽게 표현할 수 있나봅니다.

MDN에 관련 문서가 있더군요. html 관련된.. 여튼

 

제가 바꾸려던 입력창에는 적은 숫자들을 쓰기 때문에

e는 필요가 없어서 이를 막을 방법이 필요했습니다.

 

찾아보니 아래를 넣으면 된다고 하더군요.

inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}

 

즉 <TextField inputProps={{ 위에 내용 }}> 이런 식으로 넣으면 적용이 될텐데

이것도 적용이 안됐습니다.

 

그래서 결국 정규식으로 해결할 수 밖에 없었는데요.

onChange={(e) => {
          if (data.find((x) => x.field === data.field) !== undefined) {
            let temp = data.find((x) => x.field === data.field);
            temp.result = e.target.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
            e.target.value = e.target.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
            setResult(resData);
   
          }
        }}

 

이런식으로 onChange 내부에 replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1'); 

를 넣어서 숫자 외에는 입력되지 않게 하였습니다.

위 식은 되니까 한건데..

return 으로 해도 상관 없을 것 같습니다.

e.target.value값을 직접적으로 바꾸는 것이 맞을지 확신이 없어서요 ㅋㅋㅋ

작동되는 것이 가장 중요하지만..ㅎㅎ