커스텀한 number 타입 input으로 가격 상태 보여주기

 

 

구현하고자 한 것 

 

InputCommon 컴포넌트에서

개수를 늘리기 위해 

number타입 input태그에 화살표를 보이지 않게 하고 

커스텀한 모양으로 화살표를 배치하였다. 

 

해당 화살표를 클릭할 때마다 

input의 value가 변경되고, 

input의 value를 부모 컴포넌트에서 활용하여 가격의 값을 변동해주고 싶었다. 

 

 

 

 

 

 

 

잘 되지 않았던 부분 

 

커스텀 컴포넌트의 value가 변경될 때마다 

부모 컴포넌트에서 value가 변경되게 만들고 싶었는데, 

서로 연동하는 것이 잘 되지 않았다. 

 

오해했던 부분은 

커스텀이 아닌 엘리먼트에서 변경된 값을 가져오려면 

event.target.value로 가져왔기 때문에 

event객체를 변경해야 한다고 생각했던 것이다. 

 

 

 

해결방법 

값이 변경될 때마다 트리거 될 함수를 

InputCommon에 프롭으로 넘겨주고, 

InputCommon에서 만든 화살표를 클릭할 때마다 

부모에게서 받은 함수도 실행하여 state값을 변경하여 주면

 

부모컴포넌트에서 변경된 상태값을 받을 수 있게 된다.

 

 

 

{type === "number" && (
        <div className="numberInput">
          <input
            type={type}
            id="numberInput"
            value={inputNum}
            className={`input ${className}`}
            onChange={(e) => setInputNum(e.target.value)}
          />

          <div
            className="upper"
            onClick={() => {
              setInputNum((prev) => {
                return +prev + 1;
              });
              onValueChange(inputNum + 1);
            }}
          >
            <span className="material-symbols-outlined ">
              keyboard_control_key
            </span>
          </div>
          <div
            className="down"
            onClick={() => {
              setInputNum((prev) => {
                if (prev === 1) return prev;
                return +prev - 1;
              });
              if (inputNum === 1) return inputNum;
              onValueChange(inputNum - 1);
            }}
          >
            <span className="material-symbols-outlined">stat_minus_1</span>
          </div>
        </div>
      )}