Reactjs 当我在react中单击“取消”按钮时，为什么页面正在重新加载，为什么页面路径也在react中更改？

我正在做一个React项目，因为我有三个组成部分：家庭、学生名单和卡片

在Studentslist组件中，我有两个按钮，一个是营销，另一个是计算机

我所做的是当我点击计算机按钮时，只有我会显示卡组件

在此之前，一切都很好，在卡片组件中，我有一个带有提交和取消按钮的表单

因此，当我单击取消按钮时，卡组件必须消失

但当我点击“取消”按钮时，页面正在重新加载。如何停止重新加载页面以及如何

单击“卡组件”中的“取消”按钮时，隐藏卡组件而不重新加载页面

这是Studentlist.js

import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';

function Studentslist() {
    const [show, setShow] = useState(false);
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button className='btn btn-primary'>Marketing</button>
                        <button onClick={() => setShow(true)} className='btn btn-primary ml-2'>Computers</button>
                    </div>
                    {show && <Card></Card>}
                </div>
            </div>
        </div>
    )
}

export default Studentslist

这是Card.js

import React, { useState } from 'react';
import './Card.css';

function Card() {


    // const [show, hide] = useState(true)

    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-6'>
                    <div className='Registration'>
                        <form>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" className="form-control" id="password"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="qualification">Qualification</label>
                                <input type="text" className="form-control" id="qualification"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="branch">Branch</label>
                                <input type="text" className="form-control" id="branch"></input>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                            <button  className='cancel btn btn-danger ml-2'>Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Card

HTML元素表示一个可单击的按钮，用于提交表单或文档中的任何位置，以实现可访问的标准按钮功能

提交按钮是一个提交按钮，这是除Internet Explorer之外的所有浏览器的默认按钮

试一试

HTML元素表示一个可单击的按钮，用于提交表单或文档中的任何位置，以实现可访问的标准按钮功能

提交按钮是一个提交按钮，这是除Internet Explorer之外的所有浏览器的默认按钮

试一试

---

默认按钮操作是提交表单。如果你不需要，你需要阻止它：例如，防止违约；或者在按钮标签中添加type=按钮

默认按钮操作是提交表单。如果你不需要，你需要阻止它：例如，防止违约；或者在按钮标签中添加type=button，您可以使用preventDefault，因为当您使用type=submit时，页面将自动重新加载。然后，如果要关闭模式，只需将状态设置为false

function Card() {

   const [show, setShow] = useState(true)

   const closeModal = (e) => {
     e.preventDefault();
     setShow(false);
}

    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-6'>
                    <div className='Registration'>
                        <form>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" className="form-control" id="password"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="qualification">Qualification</label>
                                <input type="text" className="form-control" id="qualification"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="branch">Branch</label>
                                <input type="text" className="form-control" id="branch"></input>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                            <button  className='cancel btn btn-danger ml-2' onClick={closeModal}>Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

---

我希望它对您有帮助

您可以使用preventDefault，因为当您使用type=submit时，页面将自动重新加载。然后，如果要关闭模式，只需将状态设置为false

function Card() {

   const [show, setShow] = useState(true)

   const closeModal = (e) => {
     e.preventDefault();
     setShow(false);
}

    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-6'>
                    <div className='Registration'>
                        <form>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" className="form-control" id="password"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="qualification">Qualification</label>
                                <input type="text" className="form-control" id="qualification"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="branch">Branch</label>
                                <input type="text" className="form-control" id="branch"></input>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                            <button  className='cancel btn btn-danger ml-2' onClick={closeModal}>Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

---

我希望它能对您有所帮助

Hi@Tan Dat，现在如果我单击“取消”按钮，卡组件必须隐藏我该如何操作，我正在以这种方式尝试。const[show，hide]=useStatetrue hidefalse}type=按钮className='cancel btn btn danger ml-2'>CancelYes。试试那条路！您好@Tan Dat，现在如果我单击取消按钮，卡组件必须隐藏我如何才能做到这一点，我正在以这种方式尝试。const[show，hide]=useStatetrue hidefalse}type=按钮className='cancel btn btn danger ml-2'>CancelYes。试试那条路！