反应咏叹调 |输入/文本字段上的打字稿错误

Question

我想使用 react-aria。不幸的是我没有做到这一点。我遵循了文档 (https://react-spectrum.adobe.com/react-aria/useTextField.html)，但此错误会在输入元素上弹出。希望有人能帮助我。

代码

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

function TextField(props: AriaTextFieldOptions) {
  let ref = useRef<HTMLInputElement>(null);
  let { inputProps } = useTextField(props, ref);

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

错误

Type '{ ref: RefObject<HTMLInputElement>; accept?: string | undefined; alt?: string | undefined; autoComplete?: string | undefined; autoFocus?: boolean | undefined; ... 281 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } | { ...; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Type '{ ref: RefObject<HTMLInputElement>; autoComplete?: string | undefined; autoFocus?: boolean | undefined; cols?: number | undefined; dirName?: string | undefined; ... 263 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
    Type '{ ref: RefObject<HTMLInputElement>; autoComplete?: string | undefined; autoFocus?: boolean | undefined; cols?: number | undefined; dirName?: string | undefined; ... 263 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
      Types of property 'onChange' are incompatible.
        Type 'ChangeEventHandler<HTMLTextAreaElement> | undefined' is not assignable to type 'ChangeEventHandler<HTMLInputElement> | undefined'.
          Type 'ChangeEventHandler<HTMLTextAreaElement>' is not assignable to type 'ChangeEventHandler<HTMLInputElement>'.
            Type 'HTMLTextAreaElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, capture, and 26 more.ts(2322)

沙盒

https://codesandbox.io/s/hopeful-wood-zicxn?file=/src/App.tsx

此致 J.

Answer 1

看起来 TypeScript 很难确定您的 HTML 元素是 textarea 还是 input，所以让我们来帮忙：

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

function TextField(props: AriaTextFieldOptions) {
  let ref = useRef<HTMLInputElement>(null);
  let { inputProps } = useTextField(props, ref);

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

反应咏叹调 |输入/文本字段上的打字稿错误

React-aria | typescript error on input/ textfield

textfield

typescript

reactjs

react-aria