React 事件处理程序中带有 Typescript 的动态对象键

IT技术 reactjs typescript
2021-05-13 17:33:51

如何在 TypeScript 中为对象动态分配属性类似但不同

我有一个状态类型的组件:

{
  low: string
  high: string
}

作为 React 中的常见模式,我的事件处理程序是:

handleChange = (e) => {
  let { name, value } = e.target;
  this.setState({ [name]: value });
};

随着highlowname我输入的属性。typescript出错:

Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'Pick<State, "low" | "high">'

有没有办法告诉 Typescript 我只期望这两个值?我想避免将密钥显式传递给处理程序,但不想将状态更改为:

{
  low: string
  high: string
  [key: string]: string
}
1个回答

在完美的世界中,我们应该能够写出这样的东西:

private handleChange = (e: {target: {name: "low" | "high", value: string}}) =>
{
    const { name, value } = e.target;

    this.setState({[name]: value});
}

但不幸的是,一个报告的错误(请参阅此处此处)迫使我们使用一些临时解决方法,例如强制转换为任何类型:

this.setState({[name]: value} as any);