我想知道我是否可以從一個組件發送到另一個屬性來定義一個狀態。就像彈出視窗一樣，我有一個“立即開始”按鈕，我想彈出注冊表格并使“立即開始”按鈕消失，并在我單擊表單中的徽標 img 時關閉彈出視窗。前任：
第一個組件
function RegisterPage (props){
return(
<form className="All-Register">
<div className="Register-Header">
<img src={Logo} name="Logo" onClick={() => props.setIsOpen(!props.isOpen)}/>
</div>
<div className="Register-Form">
<input type="text" placeholder="nick_name" />
<input type="text" placeholder="email" />
<input type="password" placeholder="pass" />
<input type="submit" value="register" />
</div>
<div className="Forgot">
<span>forgot pass</span>
</div>
</form>
)
}
export default RegisterPage;
第二部分
function RegisterButton(){
const [isOpen, setIsOpen] = useState(false);
return(
<div>
{isOpen ? <RegisterPage isOpen = {isOpen} /> :
<div className="HomeWrapper">
<div className="para">
<p>Build the strongest army</p>
<p>and join the fight-club</p>
</div>
<div className="div-btn">
<button className="Reg-Btn" onClick={() => setIsOpen(!isOpen)}>start now</button>
</div>
</div>
}
</div>
);
}
export default RegisterButton;
求你的幫助:)
uj5u.com熱心網友回復：
你有兩種方法——
- 傳遞另一個道具 setIsOpen 然后您就可以使用您定義的 onClick 函式。
- 這種方式我更喜歡你使用。創建一個函式，然后在那里使用切換。然后將該函式作為道具傳遞給您的注冊組件，然后從影像上的 onClick 呼叫它。我希望你能得到我的分數。
uj5u.com熱心網友回復：
添加一個新的onLogoClick道具，RegisterPage該道具附加onClick到<img/>. 然后將RegisterButton父級中的 this 系結到將狀態設定為 false 的函式。
function RegisterPage (props){
return(
<form className="All-Register">
<div className="Register-Header">
<img src={Logo} name="Logo" onClick={props.onLogoClick}/>
</div>
<div className="Register-Form">
<input type="text" placeholder="nick_name" />
<input type="text" placeholder="email" />
<input type="password" placeholder="pass" />
<input type="submit" value="register" />
</div>
<div className="Forgot">
<span>forgot pass</span>
</div>
</form>
)
}
export default RegisterPage;
function RegisterButton(){
const [isOpen, setIsOpen] = useState(false);
return(
<div>
{isOpen ? <RegisterPage isOpen={isOpen} onLogoClick={() => setIsOpen(false)}/> :
<div className="HomeWrapper">
<div className="para">
<p>Build the strongest army</p>
<p>and join the fight-club</p>
</div>
<div className="div-btn">
<button className="Reg-Btn" onClick={() => setIsOpen(!isOpen)}>start now</button>
</div>
</div>
}
</div>
);
}
export default RegisterButton;
uj5u.com熱心網友回復：
你可以做類似的事情
{!isOpen ? (
<button className="Reg-Btn" onClick={() => setIsOpen(!isOpen)}>
start now
</button>
) : null}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/503878.html
標籤：javascript 反应 反应钩子 弹出
上一篇：Micronaut測驗資源：如何擴展AbstractTestContainersProvider類
下一篇：我想讓導航欄變粘