React-aria的useTextField绑定input出现TypeScript错误如何解决

错误原因 #

useTextField 原生支持 input 和 textarea 两类表单元素，默认情况下，返回的 inputProps 是 HTMLInputElement 和 HTMLTextAreaElement 对应的属性联合类型，当你直接将联合类型属性绑定到 input 元素上时，TypeScript 会检测到两类元素的事件属性（比如示例中的 onChange）、独有属性不兼容，触发类型报错。

解决方案 #

通过泛型参数明确指定当前组件使用的是 input 元素即可，修正后的代码如下：

import { AriaTextFieldOptions, useTextField } from "@react-aria/textfield";
import { useRef } from "react";

// 给AriaTextFieldOptions指定泛型为'input'，明确props仅适配input元素
function TextField(props: AriaTextFieldOptions<'input'>) {
  let ref = useRef<HTMLInputElement>(null);
  // 调用useTextField时也指定泛型为'input'
  let { inputProps } = useTextField<'input'>(props, ref);

  return <input {...inputProps} ref={ref} />;
}

如果需要封装textarea版本的组件，只需要将泛型改为'textarea'，同时将DOM元素替换为<textarea>即可。

如果临时需要快速绕过校验，也可以使用类型断言处理inputProps，但不推荐长期使用：

<input {...(inputProps as React.InputHTMLAttributes<HTMLInputElement>)} ref={ref} />

内容的提问来源于stack exchange，提问作者nuje