当我在反应中单击“取消”按钮时,为什么要重新加载页面,为什么在反应中其路径也会改变?

瓦姆西

我正在做一个React项目,因为我有三个部分:首页,学生列表,卡片。

在“学生列表”组件中,我有两个按钮,一个是“市场营销”,另一个是“计算机”。

我要做的是,当我单击“计算机”按钮时,只有我将显示卡组件。

到目前为止,一切都很好,在卡片组件中,我有一个带有提交和取消按钮的表格

因此,当我单击“取消”按钮时,卡组件必须消失。

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

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

这是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除外)

尝试

<button type="button" className='cancel btn btn-danger ml-2'>Cancel</button>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档