修复

Question

我正在尝试实现一个简单的onChange函数，但是打字稿中的onChange函数会出现错误

'{[x：number]类型的参数：任意； }'不可分配给 'registerState类型的参数| （（prevState：只读，道具：只读）=> registerState |选择| null）|选择<...> |空值'。输入'{[x：number]：任何; }'缺少类型中的以下属性 “选择”：用户名，密码，电子邮件，密码ConfTS2345

 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;

Answer 1

在此代码中：

 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
    });
  };

Answer 2

这似乎可以解决问题

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

反应Typescript onChange函数typeError

2 个答案:

修复