2023-02-17(onchange오류)

박준혁·2023년 2월 17일
0

✅ event값을 handling해서 타이핑 될 때마다 input에 값이 찍히게 하기 위해선 onchange함수를 써야한다. input태그 안에 value(input에 들어오는 값) 와 onchange이렇게 둘이 짝지어서 같이 다닌다.
--> ⭐input을 넣었다는 것은 input에 입력되는 값들을 핸들링 할 수 있는 state가 필요하다. 그 state 두개를 만들어 관리한다
---> ⭐버튼을 누르면 input에 입력되는 값을 state로 알 수 있다

const [inputValue, setInputValue] = useState("")

<input value = {inputValue} 
	   onChange = {(e) => {setInputValue(e.target.value)}}/>

❓❓위 코드처럼 짜고 실행을 시켰는데 input 값이 object라고 고정이 되어있었다.
뭔가 잘못되었었고, 전에도 봤던 에러였던 것 같다.

<form>
          <input
            value={inputValue.title}
            onChange={(e) => {
              setInputValue(e.target.value);
            }}
            type="text"
          />

⭕내가 해결을 시도했던 방안이다.⭕
inputValue에 콘솔을 찍어봤더니, 객체 형태 즉 object로 되어있었다.
그래서 input창에 object라고 나왔었나보다
object에서 title값을 찾으려고 했으니 inputValue.title을 써서 그 값을 정확히 집어주니 값이 제대로 나왔다.

🍀알게된 점🍀
우리가 구할 값이 어떤 type인지 제대로 알고 적용을 하자

콘솔로 타입유형을 확인하는 방법이다. 구하고자하는 값 앞에typeof만 쓰면 된다.

profile
"열정"

0개의 댓글