Question

我编写了一个JSX代码以创建一个重置按钮，在其中我可以使用“状态”将计时器值重置。问题是，当我单击按钮时，什么也没有发生，而没有更改值。即使我想通过重置功能显示控制台消息也没发生）

A创建了一个“ state.timer”变量，以添加要显示的值。重置为“定时器”值并将其更改为0的功能。调用重置功能以进行重置的按钮。

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timer: 90
    };

    function resetTime() {
      this.setState({ timer: 0 });
    }
  }
  render() {
    return (
      <div className="App">
        <h2>{this.state.timer}</h2>
        <button onClick={this.resetTime}>Reset</button>
      </div>
    );
  }
}

ReactDOM.render(<Timer />, document.getElementById("root"));

当我单击重置按钮时，该值预计显示为0，而该值仍显示90。

Answer 1

问题

您有几处错误。

访问this（例如：Timer）时，您需要使用setState而不是this.setState()
您需要将onPress回调包装在匿名函数中，以使context不会丢失（例如：onPress={()=>this.resetTime()}）

Destructuring Assignment：

写const {timer} = this.state;与const timer = this.state.timer;完全一样

将其视为访问属性的一种更简单，更优雅的方法。

为什么要分开？好图像，如果您在状态中有多个属性（而不仅仅是计时器）。那意味着您将不得不编写this.state.timer，this.state.someOtherProperty，this.state.somethingElse。当您可以这样做时，为什么要这样做并使其难以阅读。

const {timer, someOtherProperty, somethingElse} = this.state;

代码已更新：

import React from "react";

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timer: 90
    };
  }

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className="App">
        <h2>{timer}</h2>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}

工作示例here。

Answer 2

尝试类似这样的方法。您将需要将该函数绑定到构造函数。

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timer: 90
    };
    this.resetTime = this.resetTime.bind(this);
  }

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    return (
      <div className="App">
        <h2>{this.state.timer}</h2>
        <button onClick={this.resetTime}>Reset</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您也可以使用箭头功能，但是该技术依赖于建议的类属性功能。要使用此方法，必须启用transform-class-properties或启用stage-2 in Babel。如果您使用的是Create-React-App，则将对其进行配置。

 resetTime =()=> {
      this.setState({ timer: 0 });
 }

Answer 3

状态对应于组件实例，不是您的类的静态变量。

而不是通过Timer.setState从实例中调用它。

如何使用单击按钮更改状态值

3 个答案:

问题

Destructuring Assignment：

代码已更新：