与外部组件反应控制状态
与外部组件反应控制状态
提问于 2022-06-23 07:35:57
在这里，我有一个登录组件，它有两个状态(登录状态和未登录状态)，还有一个按钮，一个按钮单击，会为用户显示一个表单。
function Main() {
const [state, setState] = useState(false);
function buttonClick(event) {
state = !state;
}
return (
<div id='main'>
<p id='main-body'>{lorem}</p>
{ state ? <LoginForm /> : <LoginButton />}
</div>
)
}我的问题是onClick本身(和按钮)在另一个组件中：
function LoginButton() {
return (
<div class="btn-centered">
<button type="button" class="btn btn-outline-primary btn-lg btn-centered" onClick={}>Login</button>
</div>
)
}我是否误解了这个概念？如何通过外部组件实现我想要的结果？非常感谢您的帮助，我非常感谢您的解释，这样我就可以学习了。
回答 2
Stack Overflow用户
发布于 2022-06-23 07:44:57
可以在登录按钮组件中传递buttonClick方法，如下所示
<LoginButton onClick={buttonClick} />在Loginbutton组件中，您可以这样做
<button type="button" ... onClick={props.onClick}>Login</button>因此，当您单击登录按钮时，它将触发您的buttonClick方法。
Stack Overflow用户
发布于 2022-06-23 07:45:09
LoginButton应该获得道具并返回一个回调到主程序，它将切换状态，您还应该使用useState来更改状态，以便更改DOM，
应该是这样的
function Main() {
const [state, setState] = useState(false);
function buttonClick(event) {
setState((prev) => !prev);
}
return (
<div id='main'>
<p id='main-body'>{lorem}</p>
{ state ? <LoginForm /> : <LoginButton callback={buttonClick} />}
</div>
)
function LoginButton(props) {
const {callback} = props;
return (
<div class="btn-centered">
<button type="button" class="btn btn-outline-primary btn-lg btn-centered" onClick={callback}>Login</button>
</div>
)}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72726289
复制相关文章
相似问题
腾讯云开发者
