类型“IntrinsicAttributes & InputProps”上不存在“autoComplete”

Question

我正在使用带有 React 的 Typescript 并收到此错误：

Property 'autoComplete' does not exist on type 'IntrinsicAttributes & InputProps'.

我正在使用这样的组件：

        <Input
          value={email}
          id="email"
          type="email"
          label="email"
          autoComplete="email"
          placeholder="Joe@hotmail.com"
          handleChange={event => setName(event.target.value)}
        />

道具的打字稿是这样定义的：

type InputProps = {
  label: string;
  id: string;
  type?: "text" | "email" | "date" | "number" | "tel";
  helptext?: string;
  handleChange: (event) => void;
  value?: any;
  validationMessage?: string[] | string;
  validationType?:
    | "help"
    | "info"
    | "invalid"
    | "valid"
    | "validating"
    | "warning";
  otherProps: any;
};

任何多余的 HTML 属性都通过 otherProps 传递。

function Input({
  value = "",
  type = "text",
  handleChange,
  label,
  id,
  helptext,
  validationMessage,
  validationType,
  ...otherProps
}: InputProps) {

然后将 otherProps 放在输入上：

 <input value={value} onChange={handleChange} type={type} id={id} {...otherProps} />

Answer 1

React.InputHTMLAttributes<HTMLInputElement> 类型具有<input> 上可用道具的所有正确类型信息。您可以使用此类型扩展您的 InputProps，然后 autoComplete 属性将提供正确的类型信息。