javascript - onClick后如何不刷新页面

Question

我有一个 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;

Answer 1

你的 button在form里面并触发提交。
您可以使用 preventDefault() method阻止它这样做:

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

顺便说一句，你的return此点击处理程序的声明目前没有意义。

编辑
作为您评论的跟进:

Can you explain me what is my mistake in the return?

这不是真正的错误，但在这种情况下它是无用的，因为您没有对返回的对象做任何事情。
您希望在哪里以及如何使用 <h1>{this.state.message}</h1>你回来了吗？

如果您打算在屏幕上显示/隐藏输入消息，您可以使用 conditional rendering 来实现.
只需存储一个 bool，如 showMessage在您的状态下，仅当它设置为 true 时才呈现消息。

这是一个小例子:

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

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

  toggleMessage = (e) => {
    e.preventDefault();
    this.setState({ showMessage: !this.state.showMessage })
  }

  render() {
    const { showMessage, message } = this.state;
    return (
      <div>
        <form >
          <input
            type="text"
            placeholder="enter some text!"
            value={message}
            onChange={this.handleChange}
          />
          <button onClick={this.toggleMessage}>Toggle Show Message</button>
          {showMessage && <div>{message}</div>}
        </form>
      </div>
    )
  }
}

ReactDOM.render(<InputFieldWithButton />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

顺便说一句，bind 被认为是不好的做法render 中的函数方法，因为您在每次渲染调用时都创建了一个函数的新实例。而是在只运行一次的构造函数中执行:

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  } 

或者您可以使用将引用 this 的箭头函数在词汇上下文中:

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

这就是我在示例中使用的内容。