用于 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之间进行选择。