reactjs - 类型 'string' 不可分配给类型 keyof [Type]

Question

我希望有人能帮助解决这个问题。我对 typescript react 世界还很陌生，我写了一个 Textarea 子组件，它接受一个函数作为 onChange Prop 。然后使用 2 个字符串作为子组件的参数调用此函数。

在父组件中，我更具体地知道该函数调用的第二个参数应该是什么样子 (keyof Type)。问题是， typescript 告诉我类型字符串不可分配给类型[插入类型键的字符串]。

我认为它应该通过使用泛型来解决？但我就是无法理解它。

我试过这个 how can you express "keyof T" to be a subset of String?但错误不会消失。

准系统代码可以在这里找到:https://codesandbox.io/s/modest-dhawan-v3z2y在此示例中，第一个和第三个 Textarea 不应抛出任何错误，因为第二个参数将是指定类型之外的键。

我该如何解决这个问题？

我希望 index.tsx 中的两个 Textarea 组件都不会抛出任何类型错误，我再次认为泛型可能是解决方案，但我无法弄清楚。

提前致谢

Answer 1

不需要泛型，也不需要第二个参数。当您将该参数的值作为 props 传递时，这表明您已经知道父组件中的值是什么。您可以传递已设置名称的 lambda 或绑定(bind)函数。

      <TextArea
        id="ErrorDescription"
        name="ErrorDescription"
        className="form-control"
        isRequired
        value={inputValues.ErrorDescription}
        onChange={(value) => updateValue(value, 'ErrorDescription')}
      />

或者

// Note I had to swap the order of parameters to facilitate binding
const updateValue = (eventtargetname: keyof InputValues, eventvalue: string) => ...

const updateErrorValue = updateValue.bind(this, 'ErrorDescription')

return (
  ...
  <TextArea
        id="ErrorDescription"
        name="ErrorDescription"
        className="form-control"
        isRequired
        value={inputValues.ErrorDescription}
        onChange={updateErrorValue}
  />
)

就我个人而言，我会选择 lambda，因为它们更简洁。绑定(bind)函数在渲染函数外部使用时在类组件中表现更好，但函数和 Hook 范例不再可能。

工作示例。 https://codesandbox.io/s/quizzical-darkness-79eux