如何解决来自父级的控制模式 - React hooks |反应带
我在从父级控制 reactstrap Modal 时遇到问题。我有将数据传递给子元素的基本知识，但我不知道什么时候它更复杂，像这样...... 我很沮丧，因为我不能让它工作一整天，对不起，英语不好。
这是父钩子中代码的一部分，这应该在点击时显示模态（改变子模态的状态）：
import SignUp from "components/modals/ModalSignup";
<NavLink href="#pablo" onClick={(e) => e.preventDefault()}>
<SignUp/>
<i className="ni ni-spaceship padding-right"></i>
Register
</NavLink>
我应该如何从父元素控制 Modal 元素的状态？ 例如当有人按下注册按钮时，它会改变儿童钩子的状态（模态）
Bellow 是一个可以工作的子钩子，其中是 reactstrap 模态元素
import React from "react";
// reactstrap components
import {
Button,Card,CardHeader,CardBody,FormGroup,Form,Input,InputGroupAddon,InputGroupText,InputGroup,Modal,} from "reactstrap";
// Core Components
function ModalSignup() {
const [modalOpen,setModalOpen] = React.useState(false);
const [emailFocus,setEmailFocus] = React.useState("");
const [passwordFocus,setPasswordFocus] = React.useState("");
const [passwordConfirmFocus,setPasswordConfirmFocus] = React.useState("");
return (
<Modal
isOpen={modalOpen}
toggle={() => setModalOpen(!modalOpen)}
className="modal-dialog-centered modal-sm"
>
<div className="modal-body p-0">
<Card className="bg-secondary shadow border-0 mb-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign Up with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-neutral btn-icon"
color="default"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<span className="btn-inner--icon">
<img
alt="..."
src={require("assets/img/icons/common/google.svg")}
></img>
</span>{" "}
<span className="btn-inner--text">Google</span>
</Button>{" "}
<Button
className="btn-neutral btn-icon"
color="default"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<span className="btn-inner--icon">
<img
alt="..."
src={require("assets/img/icons/common/github.svg")}
></img>
</span>{" "}
<span className="btn-inner--text">Github</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
<div className="text-center text-muted mb-4">
<small>Or sign up here:</small>
</div>
<Form role="form">
<FormGroup className={"mb-3 " + emailFocus}>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83"></i>
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onFocus={() => setEmailFocus("focused")}
onBlur={() => setEmailFocus("")}
></Input>
</InputGroup>
</FormGroup>
<FormGroup className={passwordFocus}>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open"></i>
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
onFocus={() => setPasswordFocus("focused")}
onBlur={() => setPasswordFocus("")}
></Input>
</InputGroup>
</FormGroup>
<FormGroup className={passwordConfirmFocus}>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open"></i>
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Confirm Password"
type="password"
onFocus={() => setPasswordConfirmFocus("focused")}
onBlur={() => setPasswordConfirmFocus("")}
></Input>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button className="my-4" color="primary" type="button">
Sign Up
</Button>
</div>
</Form>
</CardBody>
</Card>
</div>
</Modal>
);
}
export default ModalSignup;
解决方法
不要陷入抑郁。尝试以这种方式编写您的注册模式：
import React,{Fragment} from 'react';
// reactstrap components
import {
Button,Card,CardHeader,CardBody,FormGroup,Form,Input,InputGroupAddon,InputGroupText,InputGroup,Modal,NavLink //NavLink import
} from "reactstrap";
// Core Components
function ModalSignup() {
const [modalOpen,setModalOpen] = React.useState(false);
const [emailFocus,setEmailFocus] = React.useState("");
const [passwordFocus,setPasswordFocus] = React.useState("");
const [passwordConfirmFocus,setPasswordConfirmFocus] = React.useState("");
const toggle = () => setModalOpen(!modalOpen);
return (
<Fragment>
<NavLink href="#pablo" onClick={toggle}>
<i className="ni ni-spaceship padding-right"></i>
Register
</NavLink>
<Modal
isOpen={modalOpen}
toggle={toggle}
className="modal-dialog-centered modal-sm"
>
<div className="modal-body p-0">
<Card className="bg-secondary shadow border-0 mb-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign Up with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-neutral btn-icon"
color="default"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<span className="btn-inner--icon">
<img
alt="..."
src={require("assets/img/icons/common/google.svg")}
></img>
</span>{" "}
<span className="btn-inner--text">Google</span>
</Button>{" "}
<Button
className="btn-neutral btn-icon"
color="default"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<span className="btn-inner--icon">
<img
alt="..."
src={require("assets/img/icons/common/github.svg")}
></img>
</span>{" "}
<span className="btn-inner--text">Github</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
<div className="text-center text-muted mb-4">
<small>Or sign up here:</small>
</div>
<Form role="form">
<FormGroup className={"mb-3 " + emailFocus}>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83"></i>
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onFocus={() => setEmailFocus("focused")}
onBlur={() => setEmailFocus("")}
></Input>
</InputGroup>
</FormGroup>
<FormGroup className={passwordFocus}>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open"></i>
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
onFocus={() => setPasswordFocus("focused")}
onBlur={() => setPasswordFocus("")}
></Input>
</InputGroup>
</FormGroup>
<FormGroup className={passwordConfirmFocus}>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open"></i>
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Confirm Password"
type="password"
onFocus={() => setPasswordConfirmFocus("focused")}
onBlur={() => setPasswordConfirmFocus("")}
></Input>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button className="my-4" color="primary" type="button">
Sign Up
</Button>
</div>
</Form>
</CardBody>
</Card>
</div>
</Modal>
</Fragment>
);
}
export default ModalSignup;
然后，只需像这样 <ModalSignup /> 渲染您的模态注册，它就会显示您的 register 链接，而无需先渲染模态。点击后，会出现模态框。
我还没有测试过这个，但这应该有效。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
