jhipster 反应形式 on更改状态 类型为 '{ [x： number]： any; }' 的参数不可分配

Question

我是 React 的新手，在具有两个字段的表单中设置状态时遇到了一些 jsx 问题，该表单执行 ajax 调用以将 json 对象(响应数据(放入状态field3中。我有以下几点：

export interface IMyClassState {
field1: string;
field2: string;
field3: object;
}
export class MyClass extends React.Component<IMyClassProps, IMyClassState> {
state: IMyClassState = {
field1: '',
field2: '',
field3: null
}
...
onSubmit = e => {
e.preventDefault();
...
}
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
...
render() {
return(
<form onSubmit={this.onSubmit}>
<input type="text" id="field1" name="field1" onChange={this.onChange}/>
<input type="text" id="field2" name="field2" onChange={this.onChange}/>
</form>
);
}
};

在一个只有两个字段的示例中，我想我可以有不同的onChange，如下所示：

<input type="text" id="field1" name="field1" onChange={this.onChangeField1}/>
...

但是如果我有 100 个字段，那将是一个问题，这就是为什么我试图直接从onChange中的e.target.name获取州字段的名称。但是，这给了我错误：

Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'IMyClassState | Pick<IMyClassState, "field1" | "field2" 

如何摆脱此错误？是否有可能像我尝试过的那样用一个衬里优雅地解决？

Answer 1

第一部分是修复e的类型。我们可以使用类型查询来告诉打字稿类型与input的onChange相同：onChange: JSX.IntrinsicElements['input']['onChange']

第二部分是修复推断为{ [x: string]: string; }的对象文字。理想情况下，我们可以告诉编译器e.target.name是IMyClassState的键

onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
this.setState({ [e.target.name as keyof IMyClassState]: e.target.value });
};

上面的代码不起作用，因为打字稿仍然会推断要{ [x: string]: string; }的对象文字的类型。让编译器推断我们想要的类型的唯一方法是将e.target.name转换为特定的IMyClassState字段。

onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
this.setState({ [e.target.name as "field1"]: e.target.value }); // Ok now
};

虽然对编译器撒谎并不理想，但这是最简单的选择。另一种选择是仅将对象转换为文本。

onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
this.setState({ [e.target.name]: e.target.value } as any as IMyClassState);
};