使有状态的 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

如果按钮在表单内，那么您必须e.preventDefault()在handleChange函数中写入，

handleChange = (e) => {

    e.preventDefault();  //It will prevent form submit

    console.log('test');

}

注意： React 组件名称应在 中PascalCase，因此只需替换registerUser为RegisterUser。