使有状态的 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) => {&nbsp; &nbsp; e.preventDefault();&nbsp; //It will prevent form submit&nbsp; &nbsp; console.log('test');}注意： React 组件名称应在 中PascalCase，因此只需替换registerUser为RegisterUser。