反应：在按下按钮组件时使用状态来更改圆形组件的外观

Question

我正在尝试通过另一个组件中的按钮选择圆形组件时，更改其外观。选择它们时，它们都必须更改外观。我遇到状态问题，有点困惑。另外，我一直在尝试使用onClick功能，但似乎无法正确使用它。任何帮助将不胜感激

App.js

import "./App.css";
import CircleSelector from "./CircleSelector";
import Circles from "./Circles";

class App extends Component {
  constructor(props) {
    super();
    this.addActiveClass = this.addActiveClass.bind(this);
    this.state = {
      active: false
    };
  }

  toggleClass() {
    const currentState = this.state.active;
    this.setState({ active: !currentState });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">test </header>
        <main>
          <CircleSelector
            className={this.state.active ? "selected" : null}
            onClick={this.toggleClass}
          />
          <Circles />
        </main>
      </div>
    );
  }
}

export default App;  

CircleSelector.js

import React from "react";

function CircleSelector(props) {
  return (
    <div className="CircleSelector">
      <button className="selected">Select Circle 1</button>
      <button>Select Circle 2</button>
      <button>Select Circle 3</button>
      <button>Select Circle 4</button>
    </div>
  );
}

// Must export the component's function (or class)
export default CircleSelector;  

Circles.js

import React from "react";

function Circles(props) {
  return (
    <div className="Circles">
      <div className="selected">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  );
}

// Must export the component's function (or class)
export default Circles;

App.css

body,
* {
  box-sizing: border-box;
}

.App {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.App-header {
  width: 100%;
  padding: 20px;
  font-size: 24px;
  background-color: grey;
  color: white;
  text-align: center;
  letter-spacing: 3px;
}

.App main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.CircleSelector {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  width: 150px;
  border: 4px solid purple;
  border-radius: 8px;
  margin-right: 20px;
}

Answer 1

似乎您的问题可能来自toggleClass。当函数执行onClick时，它是在按钮作用域而不是类作用域内使用this。

尝试像这样绑定功能：

      <CircleSelector
        className={this.state.active ? "selected" : null}
        onClick={this.toggleClass.bind(this)}
      />

您可以阅读更多并找到更多有关范围问题here的潜在解决方案>