【发布时间】：2021-04-04 02:13:36
【问题描述】：
我在从父级控制 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;
【问题讨论】：
标签： javascript reactjs reactstrap react-state