Question

Typescript React useRef 对象可能为空（不受控制的组件）

2021-11-23

925

reactjs typescript

我尝试使用对输入元素的引用，然后使用 inputRef.current.value 获取其值但我在 inputRef.current 处收到错误 Object is perhaps 'null'.ts(2531) 。

我尝试了几种不同的解决方案，但尚未使其发挥作用。任何帮助都值得赞赏。

interface RefObject<T> {
    readonly current: T | null
  }
  
const Uncontrolled: React.FC = () => {
    // const inputRef = useRef< HTMLInputElement | null> (null);
    const inputRef:RefObject<HTMLInputElement> = useRef< HTMLInputElement | null> (null);
    
    function alertValue() {
        alert(inputRef.current.value);         //Object is possibly 'null', under inputRef.current
    }

    return (
        <div>
            <p> Uncontrolled components do not have state data</p>
            <input type="text" ref={inputRef} />
            <button onClick={alertValue}>Click Me</button>
        </div>
    )
}

我的解决方案来自：

useRef TypeScript - 无法分配给类型 LegacyRef<HTMLDivElement>

TypeScript React 中的对象可能为空

Answer 1

虽然您可以使用可选链或 ! 来断言 .current 属性不为空……

alert(inputRef.current!.value);

更好的方法是使输入受控并记录状态。

const [value, setValue] = useState('');
function alertValue() {
    alert(value);
}
// ...
<input value={value} onchange={e => { setValue(e.currentTarget.value); }} />