리덕스툴킷에 타입스크립트를 적용하는 공부를 하고 있습니다.
저의 카운터 컴포넌트 입니다.
import React, {useState} from 'react'
import {useAppSelector, useAppDispatch} from '../app/hook'
import {decrement,increment,incrementByAmount} from '../modules/counterSlice'
export default function Counter() {
const count = useAppSelector(state => state.counterSlice.value)
const dispatch = useAppDispatch();
const onIncrease = () => dispatch(increment())
const onDecrease = () => dispatch(decrement())
const [input, setInput] = useState<number>(0)
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// setInput(e.target.value)
}
const onSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
dispatch(incrementByAmount(input))
setInput(0);
}
return (
<div>
<h1>{count}</h1>
<div>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
<div>
<input type="number" value={input} onChange={onChange}/>
<button onClick={onSubmit}>더하기</button>
</div>
</div>
)
}
여기서 onChange 함수의 setInput(e.target.value)에서 에러가 발생했는데요 !!
에러의 내용은 다음과 같습니다.
Argument of type 'string' is not assignable to parameter of type 'SetStateAction'.ts(2345)
이말은 즉슨.. onChange의 매개변수의 타입이(e: React.ChangeEvent<HTMLInputElement>)
string 이어서 number가 들어갈수 없다는 건데옹??
어떻게 하면 input태그에 number타입을 넣을수 있을까옹 ㅠㅠ
도와주세요 선배님들 !!
충성충성 ^^7