表格中用于广义onChange处理程序的TS类型

Question

让我们跳过func声明，等等，我会写出当前的状态类型，并说明自己

type BookFormState = {
  hasError: boolean;
}
BookForm<BookFormState> { ...
  state = {
   hasError: false
  };

然后在类内部我编写通用处理程序并在组件中调用多个输入

onChange = (event: React.ChangeEvent<HTMLInputElement>):any => {
    this.setState({ [event.target.name]: event.target.value });
  };

<form>
// ... multiple inputs ...
   <BookInput name="UNIQUE_NAME" value={this.state[name]} onChange={this.onChange} />
</form>

我在[event.target.name]：event.target.value行的onChange中有错误

Argument of type '{ [x: string]: string; } is not assignable to parameter 
of type 'BookFormState | ((prevState: Readonly<BookFormState>, props:
 Readonly<BookFormProps>) => BookformState | Pick<BookFormState,
 "hasError"> | null) | Pick<BookFormState, "hasError"> | null'. 
Property "hasError", is missing in type {[x: string]: string;}, but
 required in type <PickrBookFormState, "hasError">.

所以我最终没有在<>组件中提供BookFormState，我只是在名字后面列出所有我的imputs [name]`s状态名称，并在其中的每一个地址中添加如value = {this.state.title}的道具。但我猜这不是很好，但它的确有效......

那么正确的类型是什么来纠正上面关于{[x：string]：string;}的错误？ TS只是不明白[event.target.name]中发生了什么：event.target.value

Answer 1

要解决Property "hasError", is missing，您可以声明hasError可选。您还应该包括UNIQUE_NAME以及您计划在状态中跟踪的任何其他输入值。

type BookFormState = {
  hasError?: boolean;
  UNIQUE_NAME?: string;
}