react: typescript interface useState issue
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)
}
react: typescript interface useState issue的更多相关文章
- react + typescript 学习
react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...
- react: typescript project initialize
Initialize the project create a folder project Now we’ll turn this folder into an npm package. npm i ...
- react typescript jest config (一)
1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...
- TypeScript Interface vs Types All In One
TypeScript Interface vs Types All In One TypeScript https://www.typescriptlang.org/docs/handbook/adv ...
- React + Typescript领域初学者的常见问题和技巧
React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- React typescript issue
多个输入框发生变化时,setState: this.setState({[e.target.name]: e.target.value} as componentState)
- 使用react搭建组件库:react+typescript+storybook
前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...
- react+typescript报错集锦<持续更新>
typescript报错集锦 错误:Import sources within a group must be alphabetized.tslint(ordered-imports) 原因:impo ...
随机推荐
- PHP7内核(三):源码目录结构
上篇文章我们已经介绍了源码分析工具的安装.配置以及调试方法,本文我们来讲述一下PHP源码的目录结构. 一.目录概览 以php-7.0.12为例,看过源码的同学们应该发现源码目录多达十多个,下面是每个目 ...
- Typora+markdown 最常用语法教程
Typora+markdown 最常用语法教程(by 程序员宝藏) Typora+markdown 最常用语法教程(by 程序员宝藏) 请先配置推荐配置(文件->偏好设置): 文章目录 Typo ...
- Notepad++正则表达式查找替换文本中文字符
测试需求 测试工具中xml配置文件中注释字段包含中文字符,在Win10系统下使用工具中偶尔会出现中文乱码导致配置文件失效.解决方法将配置文件中的中文注释换成英文注释或者直接替换删除.如何将配置文件中的 ...
- 3.介绍ASP.NET Core框架
介绍ASP.NET Core框架 在这篇文章中,我将要向你们简短介绍一下ASP.NET Core 框架.当今社会,当提到软件开发,每个人都是讨论着开源以及跨平台开发.总所周知,微软是以它的基于Wind ...
- Ali_Cloud++:安装 RabbitMQ安装及环境配置
注意事项:rabbitMA版本和erlang并不是同步更新的,会出现版本不匹配,安装不了. 两都版本对应 参考官网文档 其它下载地址 1):Erlang安装 (因为是erlant语言编写的, ...
- 爬虫scrapy框架的使用
第一步 下载scrapy模块: pip install scrapy 第二步 创建项目 在终端/cmd进入创建项目的目录:scrapy startproject douban(项目名) 导入pycha ...
- Django-User
User对象 User对象是认证系统的核心.用户对象通常用来代表网站的用户,并支持例如访问控制.注册用户.关联创建者和内容等.在Django认证框架中只有一个用户类,例如超级用户('superuser ...
- 逃生 HDU 4857(反向建图 + 拓扑排序)
逃生 链接 Problem Description 糟糕的事情发生啦,现在大家都忙着逃命.但是逃命的通道很窄,大家只能排成一行. 现在有n个人,从1标号到n.同时有一些奇怪的约束条件,每个都形如:a必 ...
- 接口测试彻底弄懂Session、Cookie、Token的区别及联系hold住面试官--hold住了开3万,hold不住开3K!
一.前言:接口测试之伤:cookie,session,token本是一家! cookie,session,token的区别早就已经成为测试同行的心病,各大论坛,各大博客,各大视频网站无不充斥着各种疑问 ...
- 用<center/>标签实现markdown 图片文字等内容居中显示
markdown中,文字居中的方式是借助了html标签<center></center>的支持 示例 ![](https://img2018.cnblogs.com/blog/ ...