无法访问父组件 React 打字稿中的转发 Ref 值

Question

我有一种情况，我创建了一个输入组件。这是一个自定义组件，我想在父组件（我正在使用它的地方）中访问用户在此输入中输入的值。

我正在转发来自该输入组件的 ref，但父组件正在接收完整的输入而不是值。我如何使用该值。下面是我的代码。

Input.tsx

  interface AuxProps {
      id :''
    }

const Input = React.forwardRef<HTMLInputElement,AuxProps>((props, ref) => {
  return (      
      <input 
      id={props.id}   
      ref = {ref}         
      defaultValue = '1' 
      type='number' 
      ></input>
  );
});
export default Input;

HeaderComponent.tsx

const HeaderComponent= () => {

  const inputAmount = useRef<HTMLInputElement>(null);
  const addProductHandle = (event: any) => {
    event.preventDefault();
    console.log(inputAmount.current.value);     //<----Error:- object is possibly null
  };
  return (
    <form className={classes["form"]}>
      <Input id="1s" ref={inputAmount}></Input>
      <button onClick={addProductHandle}> + ADD </button>
    </form>
  );
};
export default HeaderComponent;

不确定如何使用此参考值。

Answer 1

你很接近。

让我们来看看 useRef return 类型：

  interface RefObject<T> {
        readonly current: T | null;
    }

根据此类型签名，current 属性可能是 T（在我们的例子中是 HTMLInputElement）或 null.

这就是您使用 typescript 的原因 - 避免在 PROD 上出错。

由于 current 可能是 null，TS 要求您仔细检查 current 是否存在。

您可以添加 ? 或 if condition:

import React, { useRef, MouseEventHandler } from 'react'

interface AuxProps {
    id: string
}

const Input = React.forwardRef<HTMLInputElement, AuxProps>((props, ref) => {
    return (
        <input
            id={props.id}
            ref={ref}
            defaultValue='1'
            type='number'
        ></input>
    );
});


const HeaderComponent = () => {

    const inputAmount = useRef<HTMLInputElement>(null);
    const addProductHandle: MouseEventHandler<HTMLButtonElement> = (event) => {

        event.preventDefault();
        console.log(inputAmount.current?.value);     // ok 
        if (inputAmount.current) {
            console.log(inputAmount.current.value); //ok
        }
    };
    return (
        <form >
            <Input id="1s" ref={inputAmount}></Input>
            <button onClick={addProductHandle}> + ADD </button>
        </form>
    );
};
export default HeaderComponent;

顺便说一句，您可以使用 MouseEventHandler<HTMLButtonElement> 作为点击处理程序。看我的例子

无法访问父组件 React 打字稿中的转发 Ref 值

Can't access forwareded Ref value in parent component React typescript

components

ref

typescript

reactjs

react-redux