React自定义密码输入框：内部用useRef时父组件如何获取输入值

针对你遇到的自定义密码输入组件内部占用ref导致父组件无法便捷获取值的问题，这里提供两种简洁可行的解决方案：

方案一：使用forwardRef + useImperativeHandle透传内部能力 #

通过forwardRef包裹组件，并结合useImperativeHandle向父组件暴露需要的属性或方法，既保留组件内部的ref逻辑，又能让父组件获取输入值。

修改后的组件代码：

import { forwardRef, useRef, useState, useImperativeHandle } from 'react';

const InputPassword = forwardRef(({ placeholder }, ref) => {
    const inputRef = useRef();
    const [isPasswordVisible, setPasswordVisible] = useState(false);
  
    // 向父组件暴露指定的能力
    useImperativeHandle(ref, () => ({
        // 暴露输入框DOM元素，父组件可直接访问其value属性
        inputElement: inputRef.current,
        // 提供直接获取值的方法
        getValue: () => inputRef.current?.value,
        // 可按需添加其他方法，比如聚焦输入框
        focus: () => inputRef.current?.focus()
    }));
  
    const setInputStatus = () => {
        // 直接修改type属性，比setAttribute更简洁
        inputRef.current.type = isPasswordVisible ? 'password' : 'text';
        setPasswordVisible(!isPasswordVisible);
    };

    return (
        <div className={cl.main}>
            <input
                ref={inputRef}
                type="password"
                placeholder={placeholder}
                className={cl.input}
            />
            <div className={cl.eyeContainer} onClick={setInputStatus}>
                <Eye isPasswordVisible={isPasswordVisible} />
            </div>
        </div>
    );
});

export default InputPassword;

父组件使用方式：

import { useRef } from 'react';
import InputPassword from './InputPassword';

const ParentComponent = () => {
    const passwordRef = useRef();

    const handleSubmit = () => {
        // 两种方式获取值二选一
        const password = passwordRef.current.getValue();
        // 或者 const password = passwordRef.current.inputElement.value;
        console.log('输入的密码:', password);
    };

    return (
        <div>
            <InputPassword ref={passwordRef} placeholder="请输入密码" />
            <button onClick={handleSubmit}>提交</button>
        </div>
    );
};

方案二：改成受控组件（推荐） #

遵循React单向数据流设计，通过props传递value和onChange回调，让父组件直接控制输入值，完全无需依赖ref，逻辑更清晰且行为可控。

修改后的组件代码：

import { useState } from 'react';

const InputPassword = ({ placeholder, value, onChange }) => {
    const [isPasswordVisible, setPasswordVisible] = useState(false);
  
    const setInputStatus = () => {
        setPasswordVisible(!isPasswordVisible);
    };

    return (
        <div className={cl.main}>
            <input
                type={isPasswordVisible ? 'text' : 'password'}
                placeholder={placeholder}
                className={cl.input}
                value={value}
                onChange={(e) => onChange(e.target.value)}
            />
            <div className={cl.eyeContainer} onClick={setInputStatus}>
                <Eye isPasswordVisible={isPasswordVisible} />
            </div>
        </div>
    );
};

export default InputPassword;

父组件使用方式：

import { useState } from 'react';
import InputPassword from './InputPassword';

const ParentComponent = () => {
    const [password, setPassword] = useState('');

    const handleSubmit = () => {
        console.log('输入的密码:', password);
    };

    return (
        <div>
            <InputPassword 
                placeholder="请输入密码" 
                value={password} 
                onChange={setPassword} 
            />
            <button onClick={handleSubmit}>提交</button>
        </div>
    );
};

方案对比 #

• 方案一适合不想大幅改动现有组件逻辑的场景，保留了内部ref的使用，同时给父组件提供灵活的取值方式。
• 方案二更符合React的设计理念，数据流清晰，避免了状态不同步的潜在问题，是更推荐的长期解决方案。

内容的提问来源于stack exchange，提问作者Igor Meshalkin