javascript - ReactJS- Katalogväljardialog fungerar inte

Jag vill ha en katalogvalsdialog i min React-app. Jag följde denna SO-tråd som kan fungera för vissa personer men inte för mig. Får kompileringsfel som

Egenskapen 'directory' finns inte på typen 'DetailedHTMLProps'.

Jag uppgraderade React till den senaste RC-versionen 17.rc.1 i tron att det kanske skulle finnas en buggfix för detta, men utan framgång.

Redigera

Det finns en metod för att lägga till detta skript i slutet av filen med hjälp av taggen för directoryval, föreslagen av @Scratch'N'Purr i kommentarerna.

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    directory?: string;
    webkitdirectory?:string;
  }
}

Svar #1

Det fungerar bra i Javascript men problemet är med Typescript. Jag antar att du har rätt om att det är ett problem.

Du kan dock ställa in det manuellt med ref.

import * as React from "react";
import "./styles.css";

export default function App() {
  const ref = React.useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    if (ref.current !== null) {
      ref.current.setAttribute("directory", "");
      ref.current.setAttribute("webkitdirectory", "");
    }
  }, [ref]);

  return <input type="file" ref={ref} />;
}