javascript - 有状态 React 组件协同工作时遇到问题

Question

我正在制作一个 React 应用程序，并且正在努力获取具有状态工作的组件的基本功能。到目前为止，我已经有了一个连接到注册页面的主页，当我单击注册页面时，我可以处理用户输入。注册是我到目前为止尝试使用状态的类组件。

到目前为止，我已经在此组件中设置了一个非常基本的流程，只是为了看看它是否有效。但是，当我单击按钮来控制台记录当前存储的内容时，整个页面会重新加载，就好像什么也没发生一样。

当前外观的非常基本的显示:

import registerUser from './user.js';

class App extends Component {
    render() {
        return (
            <Router>
                <Route path='/register' component={registerUser}/>
            </Router>
        )
    }
}
export default App;

class registerUser extends Component {
handleChange = () => {
    console.log('test');
}

render() {
    return (
        <div>
             <button onClick={this.handleChange}>Click</button>
        </div>
    )
}
export default registerUser;

但正如我提到的，当我单击按钮时，整个页面都会重新加载，就好像什么也没发生一样。我是否遗漏了一些基本的东西，为什么尝试在单独的组件中使用此方法会重新加载整个应用程序？任何帮助将不胜感激。

Answer 1

如果按钮位于表单内，则必须在 handleChange 函数中编写 e.preventDefault()，

handleChange = (e) => {
    e.preventDefault();  //It will prevent form submit
    console.log('test');
}

Demo

注意: React 组件名称应采用 PascalCase 格式，因此只需将 registerUser 替换为 RegisterUser 即可。