用於 Material-UI TextField 的 useRef 的正確類型

Question

使用帶有 Material-UI 和 TypeScript 的反應鈎子我無法為 Material-UI TextField組件找到合適的類型T 因此，我使用HTMLInputElement作為RefObject T參數，因為它也有一個focus方法。

  const focus = (inputRef: RefObject<HTMLInputElement>) => {
    if (inputRef.current !== null) {
      inputRef.current.focus()
    }
  }

在這種情況下，什么HTMLInputElement替換可以正常工作以表示 RefObject 中的TextField API ？ 我希望 Material-UI 至少會導出類似“TextFieldRef”的內容，但似乎並非如此。

需要明確的是，我沒有在代碼中的任何地方使用HTMLInputElement ，使用這只是讓 TypeScript 正常工作的一種方法，導致 Material-UI 和HTMLInputElement中的TextField都有一個focus方法。

提前致謝！

Answer 1

首先，這實際上取決於您要實現的目標。 您是要關注文本字段或根元素的輸入嗎？

來自 MUI 文檔：

ref被轉發到根元素。

要獲得<input />元素的引用，您應該使用inputRef 。 你可以在這里讀到它。 在這種情況下，您確實應該使用HTMLInputElement ，因為它是幕后的輸入。

---

讓我們深入研究 mui 代碼庫：

TextField代碼庫確實顯示了一個接收InputComponent屬性的inputRef 。

如果您確實想獲得對根元素的引用，我們可以看到TextFieldRoot組件是接收引用的根元素。 第 179 行：

    <TextFieldRoot
      className={clsx(classes.root, className)}
      disabled={disabled}
      error={error}
      fullWidth={fullWidth}
      ref={ref}
      required={required}
      color={color}
      variant={variant}
      ownerState={ownerState}
      {...other}
    >

所以讓我們探索它從哪里來。 我們可以看到它是一個樣式化的FormControl組件。 從第 33 行開始：

const TextFieldRoot = styled(FormControl, {
  name: 'MuiTextField',
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root,
})({});

從FormControl 代碼我們可以了解到FormControlRoot根接收 ref 作為 prop，第 215 行：

  return (
    <FormControlContext.Provider value={childContext}>
      <FormControlRoot
        as={component}
        ownerState={ownerState}
        className={clsx(classes.root, className)}
        ref={ref}
        {...other}
      >
        {children}
      </FormControlRoot>
    </FormControlContext.Provider>
  );
});

最后，從第 22 行我們可以理解它只是一個樣式化的 div ..

const FormControlRoot = styled('div', { 
...

所以現在，基於 MUI 基本代碼，您可以根據需要在HTMLInputElement和HTMLDivElement之間進行選擇。