reactjs - 内部所需的可选 forwardRef - ReactJS

Question

这是我的带有 forwardRef 的自定义组件。 ref 在组件内部代码中是必需的，但父组件将其作为 prop 发送是可选的

const MyComponent = React.forwardRef((props, ref) => {

    const handleButtonClick = () => {
        // I need to access the ref here but, it's null
        // when I not pass ref as prop to my component 
    }

    return (
        <>
            <input type="text" ref={ref}/>
            <button onClick={handleButtonClick}>Click</button>
        </>
    )
})

我该如何处理？我想要一个可选的 ref 作为 Prop ，它也是内部必需的。

此外，我尝试在我的组件中使用 useRef 并将转发的 ref 作为其初始值传递，在这种情况下，我无法访问父组件中的 ref。

Answer 1

您可以使用 useRef 定义一个 localRef，以防父级没有传递 ref

const MyComponent = React.forwardRef((props, ref) => {
    const localRef = useRef(null);
    const inputRef = ref || localRef;
    const handleButtonClick = () => {
        // I need to access the ref here but, it's null
        // when I not pass ref as prop to my component 
        // access input using `inputRef.current`
    }

    return (
        <>
            <input type="text" ref={inputRef}/>
            <button onClick={handleButtonClick}>Click</button>
        </>
    )
})

然而，更好的做法是不使用 refs 访问输入值，而是将输入作为受控组件并通过父级提供的 props 将此信息传递给父级

const MyComponent = React.forwardRef((props, ref) => {
    const [value, setValue] = useState('')
    const handleButtonClick = () => {
        // access input value from state like
        console.log(value);
        props.handleSubmit && props.handleSubmit(value)
    }
    const handleChange = e => {
       setValue(e.target.value);
    }
    return (
        <>
            <input type="text" value={value} onChange={handleChange} ref={inputRef}/>
            <button onClick={handleButtonClick}>Click</button>
        </>
    )
})