javascript - 如何在 React Js 中使用开/关按钮设置状态？

Question

我是一个新手，正在学习 ReactJS 并做一个小项目。

我有两个开/关按钮，当我单击“灯亮”时，应在屏幕上呈现，当我单击“灯已关闭”时，应在屏幕上呈现。

现在，当我单击关闭时，它呈现关闭，但是当我再次单击它时，它呈现打开，这是不正确的。当它关闭时，当我单击 on 按钮时，on 不会呈现，这也是不正确的。

我认为发生的事情是，当我单击关闭按钮时，它会将状态更改为 false，然后再返回 true，因为我使用的是“！” setState 中的运算符。

我确信这是一个很容易解决的问题，但是遇到了麻烦。

有任何想法吗？

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

import "./styles.css";
import "./index.css";

class Room extends React.Component {
  constructor() {
    super();
    this.state = {
      isLit: true,
      isOn: true
    };
  }

  flipLight = () => {
    this.setState({
      isLit: !this.state.isLit
    });
  };

  turnOn = () => {
    this.setState({
      isOn: this.state.isOn
    });
  };

  turnOff = () => {
    this.setState({
      isOn: !this.state.isOn
    });
  };

  render() {
    const bright = this.state.isLit ? "lit" : "dark";
    console.log(this.state.isOn);

    return (
      <div className={`room ${bright}`}>
        the room is {this.state.isLit ? "lit" : "dark"} <br />
        the light is {this.state.isOn ? "on" : "off"} <br />
        <button onClick={this.flipLight}>Change State</button>
        <br />
        <button onClick={this.turnOn}>On</button>
        <button onClick={this.turnOff}>Off</button>
      </div>
    );
  }
}

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

标签： javascriptreactjs

Answer 1

如果您使用不同的功能处理打开和关闭，您可以设置 true 和 false 值仅更新状态，如下所示：

  turnOn = () => {
    this.setState({
      isOn: true
    });
  };

  turnOff = () => {
    this.setState({
      isOn: false
    });
  };