reactjs - React Typescript onChange function typeError
问题描述
I'm trying to implement a simple onChange function, but this onChange function in typescript gives an error
Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'registerState | ((prevState: Readonly, props: Readonly) => registerState | Pick | null) | Pick<...> | null'. Type '{ [x: number]: any; }' is missing the following properties from type 'Pick': username, password, email, passwordConf TS2345
handleChange = (e: any) => {
e.preventDefault();
this.setState({
[e.target.name]: e.target.value
});
};
Would anyone have a solution for this ? because doing the following does not give me the functionality i want.
handleChange = (e: any) => {
e.preventDefault();
this.setState({
username: e.target.value,
password: e.target.value,
email: e.target.value,
passwordConf: e.target.value
});
};
register.tsx
import React, { Component, Fragment } from "react";
import Typography from "@material-ui/core/Typography";
import SignUpForm from "../forms/signUp/signUp";
import GridHoc from "../hoc/grid";
export interface registerProps {}
export interface registerState {
username: string;
password: string;
email: string;
passwordConf: string;
}
class Register extends Component<registerProps, registerState> {
state: registerState = {
username: "",
password: "",
email: "",
passwordConf: ""
};
handleChange = (e: any) => {
e.preventDefault();
this.setState({
[e.target.name]: e.target.value
});
};
render() {
return (
<Fragment>
<Typography variant="h4" style={{ letterSpacing: "2px" }}>
Register
</Typography>
<SignUpForm
username={this.state.username}
password={this.state.password}
email={this.state.email}
passwordConf={this.state.passwordConf}
signUpOnChange={this.handleChange}
/>
</Fragment>
);
}
}
export default GridHoc(Register);
signUpForm.tsx
import React from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
const SignUpForm = (props: any) => (
<form onSubmit={props.submit}>
<TextField
label="Username"
style={{ width: "100%" }}
name="username"
value={props.username}
onChange={props.signUpOnChange}
margin="normal"
/>
<br />
<TextField
label="Email"
className=""
style={{ width: "100%" }}
name="email"
value={props.email}
onChange={props.signUpOnChange}
margin="normal"
/>
<br />
<TextField
label="Password"
name="password"
type="password"
style={{ width: "100%" }}
className=""
value={props.password}
onChange={props.signUpOnChange}
margin="normal"
/>
{/* */}
<br />
<TextField
label="Confirm Password"
name="passwordConf"
type="password"
style={{ width: "100%" }}
className=""
value={props.passwordConf}
onChange={props.signUpOnChange}
margin="normal"
/>
<br />
<br />
<Button variant="outlined" color="primary" type="submit">
Sign Up
</Button>
</form>
);
export default SignUpForm;
解决方案
this seems to fix the issue
handleChange = (e: any) => {
e.preventDefault();
this.setState({
[e.target.name]: e.target.value
} as any);
};
推荐阅读
- java - Java ConcurrentHashMap computeIfAbsent() 方法是否支持基于键的“锁定”?
- reactjs - 如何通过单击从待办事项列表中删除项目?
- cookies - 浏览器关闭后立即过期的Rails cookie?
- r - 如何有选择地加载大型 .rda 文件?
- python - Bitbucket 的管道无法识别已安装的 python 库
- image-processing - Keras:如何从图像名称中提取标签为整数
- vue.js - 使用 Apollo 为 Nuxt.js SSR 预取 API 数据
- javascript - 如何显示将我引导至搜索页面而不是显示超链接的按钮?
- python - cpanel 上的 Django 应用程序 - 增加 LSAPI_CHILDREN
- node.js - 约翰尼五号电机出现奇怪错误