react:typescriptinterfaceuseStateissue

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

define interface:

interface ILoginState {
  imageId: string;
  imageSrc: string;
  username: string;
  password: string;
  verifyCode: string;    
}

useState:

const [loginData, setLoginData] = useState(loginState)

update imageId && imageSrc:

setLoginData({
  ...loginData,
  imageId: res.data.id.
  imageSrc: res.data.content
})

antd inputchange:

onInputChange(e: FormEvent<HTMLInputElement>) {
  const inputName = e.currentTarget.id;
  const inputValue = e.currentTarget.value;
  setInputData({
    [inputName]: inputValue
  } as {[key in keyof ILoginState]:ILoginState[key]})
}

antd form onsubmit

<Form onSubmit={handleSubmit.bind(this)}>

add window resizeLitener

const [contentHeight, setHeight]=useState(INTIAL_HEIGHT)
useEffect(()=>{
  screenChange();
  return () => removeListener()//回调销毁
},[contentHeight])

const screenChange = () => {
  window.addEventListener("resize", handleResize)  
}

const removeListener = () => {
  window.removeEventListener("resize", handleResize)  
}

handleResize =(e)=> {
  setHeight(e.target.innerHeight-headerHeight-footerHeight)
}