React Button Click应该改变div的显示值

Question

我得到了一个导航栏，其中有一个按钮改变登录表单的显示值。登录表单和登录表单是不同的文件，导航栏是不同的文件，应该显示它的主页也是不同的文件。这些是每一个的最小变体，所以你有一些必须详细理解我的问题:

主页:

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>
);
}

是否有一种方法来实现这一点，或者我最简单的选择是将登录源代码包含到导航条源代码?

Answer 1

您不需要将Login组件移动到导航栏中。保持原样。你可以使用useState和Props切换css类来显示/隐藏你的登录组件。我在这个CodeSandbox中为您创建了非常简单的解决方案。

步骤:

1. 创建两个CSS类hidden和block
2. 在你的Login组件中添加一个boolean prop，如果为true，将hidden类切换为block类。
3. 在Login组件中为onClick创建一个道具。
4. 在你的主页中创建一个useState，它持有一个布尔值。该布尔值传递给登录页面道具然后使用导航栏中的onClick道具来切换布尔状态

Answer 2

是的，根据你的CSS系统，这很容易实现。

React的解决方案是使用refs。简单的方法是在父组件中创建一个ref，然后将其作为prop传递给两个组件:

• 在主页(即父)，创建一个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。你慢慢来，准备好了就把文件看一遍。

Answer 3

登录页面将显示"未激活";首先是因为active设置为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>
);
}