Javascript 提交表格后直接对“谢谢”页面做出反应
我制作了一个简单的表单,点击表单的提交按钮后,我希望它自动重定向到我设置的感谢页面。谁能帮我解决这个问题。 目前,我认为它可能是这样工作的,但它不断出现错误。 多谢各位Javascript 提交表格后直接对“谢谢”页面做出反应,javascript,reactjs,Javascript,Reactjs,我制作了一个简单的表单,点击表单的提交按钮后,我希望它自动重定向到我设置的感谢页面。谁能帮我解决这个问题。 目前,我认为它可能是这样工作的,但它不断出现错误。 多谢各位 const handleSubmit = event => { alert("Thank you for registering "); event.preventDefault(); event.stopPropagation(); handleClose(); redirectT
const handleSubmit = event => {
alert("Thank you for registering ");
event.preventDefault();
event.stopPropagation();
handleClose();
redirectToPage();
};
const redirectToPage = () => redirect(true);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
if (redirect) {
return <Link to="/thankyou" />
}
return (
<>
<div className="StudentForm">
<Modal show={show} onHide={handleClose} animation={true}>
<Modal.Header closeButton>
<Modal.Title>Student Information</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={handleSubmit}>
<Row>
<Col>
<Form.Group controlId="std_name">
<Form.Control required type="text" id="std_name" name="std_name"
placeholder="Student Name" />
</Form.Group>
</Col>
</Row>
<Button variant="secondary" onClick={event => window.location.href='/home'}>Cancel</Button>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal>
</div>
</>
);
您想使用react router dom的重定向,我建议使用useState钩子来维护一个状态变量,该变量将决定何时重定向,在redirectToPage中,您只需将其设置为true
您想使用react router dom的重定向,我建议使用useState钩子来维护一个状态变量,该变量将决定何时重定向,在redirectToPage中,您只需将其设置为true
import React,{Fragment,useState} from "react";
import { Redirect } from "react-router-dom";
const [redirect, setRedirect] = useState(false);
const redirectToPage = () => setRedirect(true) ;
return (
{redirect && (
<Fragment>
<Redirect to='/thankyou' />
</Fragment>
)}
<div className="StudentForm">
// Rest of Code
);