버튼에 type을 명시하지 않으면?
테니스 레슨 회원 정보를 입력한 후,
제출 버튼을 눌러 해당 정보로 수강생을 생성하는 기능을 작업하고 있었다.
그런데 수강생이 납부한 수업 횟수를 조작하는 버튼을 누르니
의도와는 다르게 자꾸 그 상태에서 수강생 정보가 생성되는 문제가 발생했다.
위의 정보 입력란을 Form 태그로 감싸 구현했는데,
알고보니 type이 지정되지 않은 Form 태그 내부의 버튼은 type이 submit으로 지정된 것처럼 동작한다고 한다.
그래서, 등록 횟수를 조작하는 +/- 버튼을 눌렀을 때에도
의도하지 않게 회원 정보가 제출되어 버린 것이다!
+/- 버튼에 type="button"
을 추가해 문제를 해결했다.
const NumberInput = ({ content, inputValue, setInputValue }) => {
// 중간 생략
return (
<InputContainer>
<PlusMinus type="button" onClick={handleInputMinus} disabled={inputValue <= 0} ref={minus}>
<HiOutlineMinusSm />
</PlusMinus>
<input
ref={input}
className="input"
onFocus={() => {
minus.current.disabled = true;
plus.current.disabled = true;
}}
onBlur={() => {
setInputValue((prevState) => ({
...prevState,
[content]: displayed ? Number(displayed) : 0,
}));
minus.current.disabled = false;
plus.current.disabled = false;
}}
type="text"
value={displayed}
onChange={(event) => {
setDisplayed(event.target.value.replace(/[^0-9]/g, ""));
}}
/>
<PlusMinus type="button" onClick={handleInputPlus} ref={plus}>
<HiOutlinePlusSm />
</PlusMinus>
</InputContainer>
);
};
참고한 글
버튼에 타입을 쓰는 이유 (button type="button")
Author And Source
이 문제에 관하여(버튼에 type을 명시하지 않으면?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ssumniee/버튼에-type을-명시하지-않으면저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)