Javascript 如何在单击后不刷新页面

我在react中有一个小班，我想在点击按钮后在屏幕上显示结果，但在显示之前，页面会重新加载

我该怎么做

我错过了什么

import React, {Component} from 'react';

class InputFieldWithButton extends Component{
    constructor(props){
    super();
    this.state = {
      message: ''
    };
  }

  handleChange(e){
    this.setState({
      message: e.target.value
    });
  }

  doSomething(e){
    return(
      <h1>{this.state.message}</h1>
    )
  }

  render(){
    return (
      <div>
        <form >
        <input type="text" placeholder="enter some text!" value=
      {this.state.message}
        onChange={this.handleChange.bind(this)}/>
        <button onClick={this.doSomething.bind(this)}>Click me</button>
          </form>             
      </div>
    )
  }
}

export default InputFieldWithButton;

import React，{Component}来自'React'；
类InputFieldWithButton扩展组件{
建造师（道具）{
超级（）；
此.state={
消息：“”
};
}
手变（e）{
这是我的国家({
信息：e.target.value
});
}
剂量测定法（e）{
返回(
{this.state.message}
)
}
render（）{
返回(
点击我
)
}
}
导出默认InputFieldWithButton；

您的

按钮

位于

表单中

并触发提交。
您可以使用

preventDefault（）

来阻止它这样做：

  doSomething(e) {
    e.preventDefault();
    return (
      <h1>{this.state.message}</h1>
    )
  }

---

您没有指定按钮的类型

<button type="button">

---

将按钮上的

类型

属性设置为

按钮

。默认值为

submit

，因为它被包装在

表单中

。因此，您的新按钮html应如下所示：

<button type="button" onClick={this.doSomething.bind(this)}>Click me</button>

点击我

可能的重复项您能解释一下我在返回中的错误是什么吗？不是错误，但它是无用的，因为您没有对返回的对象执行任何操作。您希望在何处以及如何使用要返回的

{this.state.message}

？我将函数作为回调传递，并且此方法没有停止自动重新加载按钮单击-

localStorageFunc（）}>Enroll