Question

我有小班的反应，我想在点击按钮后在屏幕上显示结果，但在显示发生之前，页面重新加载。

我该怎么做？

我错过了什么？

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 type="button">

Answer 2

您的button位于form内并触发提交您可以使用preventDefault() method阻止它执行此操作：

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

顺便说一下，此点击处理程序的return语句目前没有任何意义。

修改
作为评论的后续内容：

你能解释一下我在回报中的错误吗？

这不是一个错误，但在这种情况下它没用，因为你没有对返回的对象做任何事情您希望在何处以及如何使用您要返回的<h1>{this.state.message}</h1>？

如果您打算在屏幕中显示/隐藏输入消息，可以使用conditional rendering执行此操作只需在您的州中存储类似showMessage的bool，并仅在消息设置为true时才显示该消息。

这是一个小例子：

＆＃13;
＆＃13;
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'));
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

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

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

这就是我在我的例子中使用的。

Answer 3

将按钮上的type属性设置为button。默认值为submit，因为它包含在form中。所以你的新按钮html应如下所示：

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

如何在onClick之后刷新页面

3 个答案: