Reactjs. 在組件內部和外部使用 Ref

Question

我為密碼寫了一個自定義輸入。 他看起來像這樣：

const InputPassword = ({placeholder}) => {
    const inputRef = useRef()
    const [isPasswordVisible, setPasswordVisible] = useState(false)
  
    function setInputStatus() {
        if (isPasswordVisible) {
            inputRef.current.setAttribute('type', 'password')
        } else {
            inputRef.current.setAttribute('type', '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;

現在我想從我在父組件中的輸入中獲取值。 執行此操作的最佳方法是使用 forwardRef，但我的組件已經具有更改輸入類型所需的內部 Ref。 當然，您可以以某種方式使用一個 Ref 來解決這兩個問題，但我沒有找到如何解決的方法。

我試圖從父級傳遞一個 Boolean 類型 state ，這樣當這個 state 改變時，調用子組件中的一個方法，這個方法會改變父級中的另一個 state ，它存儲子級的值。 當這個父 state 發生變化時，必要的邏輯就會為我解決。 但事實證明，代碼和上面寫的一樣繁瑣和混亂。 自然地，這樣的代碼不能很好地工作，它表現出不可預知的行為。 我相信解決方案要簡單得多。

Answer 1

您還可以將state變量傳遞給子組件，我正在傳遞一個ref變量，假設父組件不需要根據作為prop傳遞的variable值的變化重新渲染。

您的父組件應該有一個inputRef ，並將其作為prop傳遞給子組件，如下所示：

const Parent = () => {
  const inputRef = useRef()
  
  return <InputPassword inputRef={inputRef} />
}

export default Parent;

const InputPassword = ({placeholder, inputRef}) => {
    const [isPasswordVisible, setPasswordVisible] = useState(false)
  
    function setInputStatus() {
        if (isPasswordVisible) {
            inputRef.current.setAttribute('type', 'password')
        } else {
            inputRef.current.setAttribute('type', '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