我是React的新手,在使用两个字段设置状态时遇到了一些麻烦,这两个字段执行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
s:
<input type="text" id="field1" name="field1" onChange={this.onChangeField1}/>
...
但如果我有100个字段就会出现问题,这就是为什么我要在我的e.target.name
中直接从onChange
获取州字段的名称。但是,这给了我错误:
Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'IMyClassState | Pick<IMyClassState, "field1" | "field2"
我该如何摆脱这个错误?是否有可能像我尝试的那样用一个衬垫优雅地解决?
第一部分是修复e
的类型。我们可以使用类型查询来告诉typescript类型与onChange
的input
相同: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 });
};
上面的代码不起作用,因为typescript仍然会将对象文字的类型推断为{ [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);
};