如何在Typescript中使用React ref作为可变实例?当前的属性似乎被定义为只读。
我正在使用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);
};
});
它生成编译器错误:语义错误 TS2540:无法分配给只读属性“current”。
我还尝试过const inputRef = useRef<{ current: HTMLInputElement }>();
这导致了以下编译器错误:
Type 'HTMLElement | null' is not assignable to type '{ current: HTMLInputElement; } | undefined'.
Type 'null' is not assignable to type '{ current: HTMLInputElement; } | undefined'.
HTMLInputElement
是正确的,但是inputRef
应该最初设置为null
,使用useRef<HTMLInputElement>(null)
。 - dev<input ref={myRef} />
- 那么设置myRef.current = ...
就可以起作用。 - JPollock