Question

我希望有人可以提供帮助。我对打字稿反应世界还很陌生，我编写了一个Textarea子组件，该子组件将功能用作onChange道具。然后从子组件中使用2个字符串作为参数调用此函数。

在父组件中，我更清楚地知道该函数调用的第二个参数应该是什么样（keyof Type）。问题是，打字稿告诉我类型字符串不能分配给类型[插入类型键的字符串]。

我认为应该通过使用泛型来解决？但是我根本无法解决这个问题。

我尝试了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或已设置名称的绑定函数。

      <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，因为它们更清洁。当在render函数之外使用绑定函数时，绑定函数在类组件中的性能更好，但是对于函数和钩子范式而言，绑定函数将不再可能。

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

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

1 个答案: