我有一個導航欄，它有一個按鈕可以更改登錄表單的顯示值。登錄表單和登錄表單是不同的檔案，導航欄是不同的檔案，應該顯示的主頁是不同的檔案。這些是每個的最小變體，因此您可以詳細了解我的問題：
主頁：
const HomePage = () => {
return (
<div>
<Navbar />
<Login />
<div id="content">
</div>
</div>
);
}
導航欄：
const Navbar= () => {
const showLogin = () => {
document.getElementById('Login').style.display='block';
}
return (
<div id="Navbar">
<NavLink activeClassName="active" to='/'><img src={logo}/></NavLink>
<ul>
...
</ul>
<ul>
<button onClick={showLogin}>Anmelden</button>
</ul>
</div>
);
}
登錄表格：
const Login = () => {
return (
<div id="Login">
<form>
<label>Anmelden</label>
<label for="username">Nutzername</label>
<input name="username" type="text"></input>
<label for="pw">Passwort</label>
<input name="pw" type="password"></input>
<button type="submit">Login</button>
</form>
</div>
);
}
有沒有辦法實作這一點，或者我最簡單的選擇是將登錄源代碼包含到導航欄源代碼中？
uj5u.com熱心網友回復：
您不需要在導航欄中移動您的登錄組件。保持原樣。您可以使用useState和Props切換 css 類來顯示/隱藏您的登錄組件。我在這個CodeSandbox中為您創建了非常簡單的解決方案。
腳步：
- 創建兩個 CSS 類
hidden和block - 在您的登錄組件中添加一個布爾屬性，如果為真，則將類切換
hidden為。block onClick在 Login 組件中創建一個 prop for 。- 在您的主頁內創建一個
useState包含布林值的內容。該布林值將其傳遞給登錄頁面道具，然后使用onClick來自導航欄的道具來切換該布爾狀態
uj5u.com熱心網友回復：
是的，根據您的 CSS 系統，這很容易通過使用它來實作。
React 解決方案是使用refs。簡單的方法是在父組件中創建一個ref，然后將其作為道具傳遞給兩個組件：
在主頁（即父級）中，像這樣創建一個參考，
loginRef = useRef();然后將其作為道具傳遞給 2 個孩子。在
Login-Form.js您使用 id Login 像這樣在 div 上分配該道具<div id='Login' ref={props.loginRef}>然后
Navbar.js你可以使用那個道具來改變它的顯示值，就像這樣 constshowLogin = () => {props.loginRef.current.style.display='block';}
注意：這是一種快速簡便的方法，不是最佳實踐，但它可以完成作業。這里的最佳實踐是使用forwardRef和 - 超級高級 - useImperativeHandle。準備好后，花點時間閱讀檔案。
uj5u.com熱心網友回復：
登錄頁面將首先顯示“它不活動”，因為活動設定為 false。但是一旦您單擊提交按鈕，它將顯示“它是活動的”
主頁
const HomePage = () => {
const[active,setActive]=useState(false);
return (
<div>
<Navbar activesetter={setActive} />
<Login activestatus={active} />
<div id="content">
</div>
</div>
);
}
登錄
const Login = (props) => {
return(
<div>
<div>
{props.activestatus ? "it is active" : "it is not active" }
</div>
</div>
);
}
導航欄
const Navbar = (props) => {
const handleSubmit=(e)=> {
e.preventDefault();
props.activesetter(true);
}
return(
<div>
<form onSubmit={handleSubmit}>
<button type="submit">Login</button>
</form>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/480845.html
標籤：javascript html 反应 dom