Question

在这个反应应用程序中，有一个包含几个输入字段的表单。这些字段都使用this.handleChange属性onChange。

private handleChange = (event: React.FormEvent<HTMLInputElement>) => {
    let target = event.target as HTMLInputElement;
    this.setState({
        [target.name]: target.value
    });
};

我得到的打字稿错误是：

ERROR in [at-loader] ./src/components/FormSubmitHighScore.tsx:43:23 
TS2345: Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'Pick<State, "first_name" | "last_name" | "email_address" | "school_name" | "region" | "submitted">'.
Property 'first_name' is missing in type '{ [x: string]: string; }'.

因此，通过动态设置状态名称字段（基于正在使用的输入），会触发此Typescript错误（但它在浏览器中可以正常工作）。

如何在此上下文中指定正确的类型？

Answer 1

不幸的是，在bugs Notepad++修复之前 - 你必须使用一些丑陋的解决方法，例如：

this.setState({
    [target.name]: target.value
} as any);

Answer 2

避免＆＃34;任何＆＃34;我使用的催眠警告：

this.setState({
  [target.name]: target.value
} as Pick<State, keyof State>);

Answer 3

将函数传递给setState也可以。我的猜测是因为您正在传播状态，所以打字稿知道它具有状态的所有属性。

    this.setState(state => ({
      ...state,
      [name]: value,
    }));

我遇到了与您得到的类似的错误。这是我的变更处理程序的实现：

  onChange = (name: keyof ComponentState, value: any) => {
    this.setState(state => ({
      ...state,
      [name]: value,
    }));
  };

类型＆＃39; {[x：string]：string; }＆＃39;

3 个答案: