在下面的代码示例中,我尝试为多个输入设置一个 onInputChange 处理程序,TypeScript 在语句 {[name]: value}
上给我以下错误:
[ts]
Argument of type '{ [x: number]: string | boolean; }' is not assignable to parameter of type 'SoftwareLicenseCodesState | ((prevState: Readonly<SoftwareLicenseCodesState>, props: Readonly<SoftwareLicenseCodesProps>) => SoftwareLicenseCodesState | Pick<SoftwareLicenseCodesState, "count" | ... 4 more ... | "distributor"> | null) | Pick<...> | null'.
Type '{ [x: number]: string | boolean; }' is not assignable to type 'Pick<SoftwareLicenseCodesState, "count" | "oneTimeUsage" | "duration" | "validFrom" | "validTo" | "distributor">'.
Property 'count' is missing in type '{ [x: number]: string | boolean; }'.
这里有什么问题?我该如何解决?
import * as React from 'react';
import './SoftwareLicenseCodes.css';
interface SoftwareLicenseCodesProps {
}
interface SoftwareLicenseCodesState {
count: string;
oneTimeUsage: boolean;
duration: string;
validFrom: string;
validTo: string;
distributor: string;
}
class SoftwareLicenseCodes extends React.Component<SoftwareLicenseCodesProps, SoftwareLicenseCodesState> {
constructor(props: SoftwareLicenseCodesProps) {
super(props);
this.state = {
distributor: '',
count:'',
oneTimeUsage: false,
duration: '',
validFrom: '',
validTo: ''
};
this.onInputChange = this.onInputChange.bind(this);
}
handleSubmit(event: React.FormEvent<HTMLFormElement>) {
alert('submit');
event.preventDefault();
}
onInputChange = (event: React.FormEvent<HTMLInputElement>) => {
const value = event.currentTarget.type === 'checkbox' ? event.currentTarget.checked : event.currentTarget.value;
this.setState({
[name]: value
});
}
render() {
return (
<div className="user-container software-codes">
<div className="user-single-container">
<h1>Software License Codes</h1>
<form className="software-codes__form" onSubmit={this.handleSubmit}>
<label>
<span className="software-codes__input-element">Count</span>
<input
name="count"
type="number"
value={this.state.count}
/>
</label>
<label>
<span className="software-codes__input-element">Distributor</span>
<input
name="distributor"
type="text"
value={this.state.distributor}
/>
</label>
<label>
<span className="software-codes__input-element">One time usage</span>
<input
name="oneTimeUsage"
type="checkbox"
checked={this.state.oneTimeUsage}
/>
</label>
<label>
<span className="software-codes__input-element">Duration</span>
<input
name="duration"
type="number"
value={this.state.duration}
/>
</label>
<input className="software-codes__input-element" type="submit" value="Submit" />
</form>
</div>
</div>
);
}
}
export default SoftwareLicenseCodes;
最佳答案
您没有显示错误所提示的接口(interface)(LicenseCodesState
、Pick
),但我假设它们的定义类似于您引用的 SoftwareLicenseCodesState
.
要像您的 this.setState({[name]: value});
那样允许动态属性分配,您需要做以下两件事之一:
为定义添加动态属性访问(但请继续阅读):
interface SoftwareLicenseCodesState { count: string; oneTimeUsage: boolean; duration: string; validFrom: string; validTo: string; distributor: string; [key: string]: any; // <=== }
手册将其称为“字符串索引签名”,它包含在 Interfaces 下.
这样做的问题是,当然,这意味着您会丢失类型检查——不仅是在您使用它的地方,而且基本上在您使用
SoftwareLicenseCodesState
的任何地方。在执行
setState
调用时使用类型断言。你有几个选择。您可以在name
上使用断言:const name = event.currentTarget.name as keyof SoftwareLicenseCodesState; this.setState({[name]: value});
或在您传递的状态对象上:
this.setState({[event.currentTarget.name]: value} as Partial<SoftwareLicenseCodesState>);
这会丢失对该调用的类型检查,但会在其他地方保留它。
关于reactjs - TypeScript 提示我的 setState 语句使用了属性访问器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52144584/