NextJS -从子组件内部关闭模态组件

Question

我使用的是React Bootstrap中的模态组件，一切都如预期的那样工作，除了我无法弄清楚如何自动关闭提交成功后的Modal

我知道我可以从Modal组件中调用onHide函数，就像这样:<Button onClick={props.onHide}>Close</Button>

是否有一种方法来自动调用这个onHide函数，如果，只有当有一个成功的提交表单MailingListSendgrid组件?

index.js

<ModalMailingList show={modalShow} onHide={() => setModalShow(false)} />

ModalMailingList.js

import Modal from "react-bootstrap/Modal"; 
import MailingListSendgrid from "@/components/MailingListSendgrid";
export default function ModalMailingList(props) {
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
className="special_modal" //Add class name here
>
<Modal.Header closeButton></Modal.Header>
<Modal.Body>
<MailingListSendgrid />
</Modal.Body>
</Modal>
);
}

MailingListSendgrid.js

.
.
.
.

const MailingListSendgrid = () => {
const [isError, setIsError] = useState(true);
const [shakeIt, setshakeIt] = useState(false);
const [mail, setMail] = useState("");
const [isLoading, setLoading] = useState(false);
const [message, setMessage] = useState(null);

const subscribe = () => {
const regEx = /[a-zA-Z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,8}(.[a-z{2,8}])?/g;

setMail("");

if (!regEx.test(mail) && mail !== "") {
setIsError(true);
setshakeIt(true);
setMessage("Email is Not Valid");
setTimeout(() => {
setshakeIt(false);
}, 1000);
} else if (mail === "") {
setIsError(true);
setshakeIt(true);
setMessage("Email is Empty");
setTimeout(() => {
setshakeIt(false);
}, 1000);
} else {
setLoading(true);

axios
.put("api/MailingList", {
mail,
})
.then((result) => {
if (result.status === 200) {
setIsError(false);
setMessage(result.data.message);
setLoading(false);
}
})
.catch((err) => {
setIsError(true);
setMessage(err.data.message);
setLoading(false);
});

setMessage(null);
setshakeIt(false);
}
};
return (
.
.
.
<input
onChange={(e) => {
setMail(e.target.value);
}}
type="email"
className={`form-control required email w-auto text-center text-sm-start`}
placeholder={subscription.formPlaceholder}
value={mail}
autoComplete="email"
required
></input>
<button
type="submit"
name="subscribe"
onClick={subscribe}
className="input-group-text justify-content-center"
disabled={isLoading}
>
.
.
.

);
};
export default MailingListSendgrid;

Answer 1

我认为这里最好的选择是传递一个函数作为道具，从而仍然使MailingListSendgrid可重用，例如

<MailingListSendgrid onSubmit={()=> props.onHide()} />

如果成功，就在MailingListSendgrid中使用它。