【问题标题】：React Typescript onChange function typeError反应 Typescript onChange 函数 typeError
【发布时间】：2020-02-17 23:10:54
【问题描述】：

我正在尝试实现一个简单的 onChange 函数，但是 typescript 中的这个 onChange 函数会出错

类型参数 '{ [x: number]: any; }' 不可分配给 'registerState | 类型的参数（（上一个状态：只读，道具：只读）=> 注册状态 |挑选 |空） |选择<...> |空值'。键入'{ [x：数字]：任何; }' 缺少类型中的以下属性 'Pick'：用户名、密码、电子邮件、passwordConf TS2345

 handleChange = (e: any) => {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    });
  };

有人对此有解决方案吗？因为执行以下操作并没有给我想要的功能。

  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;

【问题讨论】：

你能分享signUpOnChange回调声明吗？
好的，我刚刚更新了代码

标签： reactjs typescript

【解决方案1】：

这似乎解决了问题

  handleChange = (e: any) => {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    } as any);
  };

【讨论】：

【解决方案2】：

在这段代码中：

 handleChange = (e: any) => {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    });
  };

发生错误是因为 e.target.name 是 string 并且 TypeScript 无法确定它将成为 State 类型中的有效键。

修复

只需快速断言即可：

 handleChange = (e: any) => {
    e.preventDefault();
    this.setState({
      [e.target.name as keyof registerState]: e.target.value
    });
  };

【讨论】：

感谢您的回答，但错误仍然存在