React——ts 常用的类型声明

【函数式组件】

interface Props{
  IndexName:string
}
export const Index:React.FC<Props> = (props:Props)=>{
  return <div>Hello:{props.IndexName}</div>
}

【useRef】

//Input
const InputDom = useRef<HTMLInputElement>(null)
//Div
const divRef = useRef<HTMLDivElement>(null)
//Select
const selectRef = useRef<HTMLSelectElement>(null)

【useCallback】

这里只是列举了一小部分

//点击事件
const handle = useCallback<React.MouseEventHandler>((event)=>{
	console.log(event.currentTarget.innerHTML)
},[])
//input-change事件
onst change = useCallback<React.ChangeEventHandler<HTMLInputElement>>((event)=>{
	console.log(event.target.value)
},[])
//input-按键事件
const keyUp = useCallback<React.KeyboardEventHandler<HTMLInputElement>>((event)=>{
    console.log(event.currentTarget.value)
},[])
//input-聚焦事件
const focus = useCallback<React.FocusEventHandler<HTMLInputElement>>((event)=>{
    console.log(event.target.value)
},[])