所以我最近发现事件处理程序的回调不利于渲染性能:https://reactjs.org/docs/handling-events.html
我试图通过在类方法中获取事件的属性来注意这一点,而不是做类似的事情:onClick={({value}) => this.setState({"someProperty"as keyof状态:值})}
等
但是现在我不能在该回调中显式声明类型安全,我试图对此保持动态并且我的类型检查器对下面的代码没问题,但是我怎样才能让它提示输入元素有 name
属性不是 keyof State
?
interface State {
someProperty: string;
}
class MakeMeSafer extends React.Component<{}, State> {
state: State = {
someProperty: ''
}
set = ({ currentTarget: { name, value } }: React.SyntheticEvent<HTMLInputElement>): void => {
this.setState({ [name as keyof State]: value });
}
render(): JSX.Element {
return (
<div>
<input type="text" name="some-name-not-in-state" onChange={this.set} />
</div>
);
}
}
最佳答案
您将 name
属性显式转换为 State
的键,因此编译器不会报错是正常的。
如果您需要类型安全,我会改用闭包:
interface State {
someProperty: string;
}
class MakeMeSafer extends React.Component<{}, State> {
state: State = {
someProperty: ''
}
onChange = (name: keyof State) =>
(e: React.FormEvent<HTMLInputElement>) => {
const newValue = e.currentTarget.value;
this.setState({name: newValue});
}
}
render(): JSX.Element {
return (
<div>
<input type="text" onChange={this.onChange('some-name-not-in-state')} />
</div>
);
}
}
关于javascript - React with typescript - 使用 setState 类型安全,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49972310/