Reactjs 手动设置当前值时，我应该使用useRef（）钩子的什么类型的typescript类型？

如何使用React ref作为带有Typescript的可变实例？当前属性的类型似乎为只读

我正在使用React+Typescript开发一个库，该库与React未呈现的输入字段交互。我想捕获对HTML元素的引用，然后将React事件绑定到它

  const inputRef = useRef<HTMLInputElement>();
  const { elementId, handler } = props;

  // Bind change handler on mount/ unmount
  useEffect(() => {
    inputRef.current = document.getElementById(elementId);
    if (inputRef.current === null) {
      throw new Exception(`Input with ID attribute ${elementId} not found`);
    }
    handler(inputRef.current.value);

    const callback = debounce((e) => {
      eventHandler(e, handler);
    }, 200);

    inputRef.current.addEventListener('keypress', callback, true);

    return () => {
      inputRef.current.removeEventListener('keypress', callback, true);
    };
  });

---

是的，这是打字方式的一个怪癖：

function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T|null): RefObject<T>;

---

然后

T

是

HTMLInputElement | null

，它与第一个参数的类型相匹配，因此您点击第一个覆盖并得到一个可变的引用。

我认为

HTMLInputElement

是正确的，但inputRef最初应该设置为

null

，而

useRefI也这样认为。如果React的渲染过程中捕获了ref-
-未设置
myRef.current=…
这可能会有所帮助：特别是
ref7
谢谢！这很有道理，我的代码需要编译。我使用了
constinputref=useRef（null）
以避免来自
inputRef.current=document.getElementById（elementId）的编译器错误不确定这是否值得编辑。是的，如果您不需要ref中任何特定于输入的属性，那么我会像您所做的那样扩展您注释ref的类型；如果您确实需要特定于输入的属性，我可能会在分配之前将
getElementById（elementId）作为HTMLInputElement
。作为对其他任何人的参考，我发现如果没有useRef钩子，这是无法完成的，createRef将不允许这样做。也许有办法，但我找不到。对变量（在useffect中赋值）似乎不起作用
const shaderMat:React.reobject=useRef（null）不允许我执行
shaderMat.current=mat
因为curretn是只读的。@AmbroiseRabier您已经显式地将
shaderMat
注释为
RefObject
，这是不可变的类型，所以是的，它不会让您在useffect中对其进行变异。您需要使用
useRef
的类型参数来控制类型，而不是变量本身的注释。
function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T|null): RefObject<T>;

useRef<HTMLInputElement | null>(null)