useState重定向到Next.js中的不同组件

Question

我在Next.js中使用了Next.js来根据用户单击的按钮呈现不同的组件。下面是主页的代码(在应用程序中称为account.js )：

//getting components and importing react
import react from 'react'

const account = () => {
    const [active, setActive] = react.useState("general")
    return (
        <>
            <div className="container my-5">
                <div className="container text-center mb-3">
                    <button onClick={() => setActive("general")} className="btn btn-primary btn-lg mx-3">General Information</button>
                    <button onClick={() => setActive("education")} className="btn btn-primary btn-lg mx-3">Education History</button>
                    <button onClick={() => setActive("tests")} className="btn btn-primary btn-lg mx-3">Test Scores</button>
                    <button onClick={() => setActive("background")} className="btn btn-primary btn-lg mx-3">Background information</button>
                    <button onClick={() => setActive("documents")} className="btn btn-primary btn-lg mx-3">Upload documents</button>
                </div>
            </div>

            <div className="container my-5">
                {
                    active === "zero" && <p className='text-center'>Select a field to start</p>
                }
                {
                    active === "general" && <General></General>
                }
                {
                    active === "education" && <Education></Education>
                }
                {
                    active === "tests" && <Tests></Tests>
                }
                {
                    active === "background" && <Background></Background>
                }
                {
                    active === "documents" && <Documents></Documents>
                }
            </div>
        </>
    )
}

export default account

现在，其中一个组件，即Education.js也有一个按钮，当单击该按钮时，将显示一个不同的组件，AddSchool.js。问题是，当我在useState中使用Education.js时，虽然它确实显示了单击按钮时希望它指向的组件，但它会重定向回使用useState的第一页(account.js)。

Education.js代码

import AddSchool from './AddSchool.js'
import react from 'react'


const Education = () => {
    const [schoolerActive, schoolActive] = react.useState("noSchool")

    return (
        <form action="">
            {/* Some stuff here */}
                        <div>
                <button onClick={() => schoolActive("schooler")} className='btn btn-warning'>Add Schools +</button>
                {
                    schoolerActive === "noSchool" && <></>
                }
                {
                    schoolerActive === "schooler" && <AddSchool />
                }
            </div>
        </form>
    )
}

export default Education

我希望当我点击'Add School +‘按钮时，它只会呈现AddSchool.js组件。相反，它所做的就是按照我想要的方式呈现AddSchool.js组件，但是由于某种原因，它会重定向到account.js。

有人能指出我在这里出了什么错吗？

Answer 1

窗体中没有类型属性的按钮会自动提交表单，导致页的位置发生更改。

Answer 2

正如另一个答案所提到的，您需要添加一个type属性来指定按钮是表单中的一个按钮。

在HTML中，如果在表单中放置一个按钮而没有<input type="button" />，那么它将自动充当提交按钮。

要解决这个问题，只需将type="button"添加到按钮元素中即可；这样，它不会意外提交表单。

<button type="submit" onClick={() => {...}}>...</button>