reactjs – React事件处理程序中的Typescript的动态对象键

与 How do I dynamically assign properties to an object in TypeScript?相似但截然不同

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

{
  low: string
  high: string
}

和React中的常见模式一样,我的事件处理程序是：

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

在我的输入上具有高和低名称属性.打字稿错误：

类型'{[x：string]：string; }’不能分配给’Pick< State,'low“|类型的参数“高” >” 有没有办法让我告诉Typescript我只期望那两个值？我想避免显式将密钥传递给处理程序,但不希望将状态更改为：

{
  low: string
  high: string
  [key: string]: string
}

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

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

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

但遗憾的是,报告的错误(参见here或here)迫使我们使用一些临时解决方法,例如转换为任何或类似的：

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