Как я могу изменить цвет фона на элемент реагировать на событие onclick

Question

У меня 3 реагирующих компонента, которые в основном 3 деления. Теперь я выбираю один компонент из них, нажав. Теперь я хочу изменить цвет фона выбранного компонента на черный. Если я выберу другой компонент, то ранее выбранный компонент должен вернуться в нормальное состояние. Как я могу это сделать?

Answer 1

Вот простое решение:

.App {
  display: flex;
}

.box {
  width: 150px;
  height: 150px;
  margin: 20px;
  padding: 20px;
}

import React from "react";
import "./styles.css";

export default function App() {
  const [bg, changeBGColor] = React.useState(1);
  return (
    <div className="App">
      <div
        className="box"
        onClick={() => changeBGColor(1)}
        style={{
          backgroundColor: bg === 1 ? "black" : "red"
        }}
      />
      <div
        className="box"
        onClick={() => changeBGColor(2)}
        style={{
          backgroundColor: bg === 2 ? "black" : "yellow"
        }}
      />
      <div
        className="box"
        onClick={() => changeBGColor(3)}
        style={{
          backgroundColor: bg === 3 ? "black" : "green"
        }}
      />
    </div>
  );
}

Вставьте это в Codesandbox , чтобы увидеть результат.

Здесь я даю, используя React hook, который принимает уникальный идентификатор. Если он установлен, то этот компонент будет black.

Так что 1-й div по умолчанию равен black. Если я нажимаю 2-й div, я изменяю значение bg на 2 и в свойстве style проверяю, выбран ли 2, затем устанавливаю black цвет. Точно так же я делаю то же самое для 3-го деления.

Answer 2

import React, { Component } from 'react'

export default class YourClass extends Component {
  constructor(props) {
    super(props)
    this.state = {
      color: 'black'
    }
    this.changeColor = this.changeColor.bind(this)
    this.changeColor2 = this.changeColor2.bind(this)
  }

  changeColor() {
    this.setState({
      color: 'red'
    })
  }

  changeColor2() {
    this.setState({
      color: 'green'
    })
  }

  render() {
    return (
      <div style={{ backgroundColor: this.state.color }}>
        <button onClick={this.changeColor} />
        <button onClick={this.changeColor2} />
      </div>
    )
  }
}

Это очень простой способ сделать это, по умолчанию div черный, когда вы нажимаете первую кнопку, вы можете поменять ее на красную, а вторая на зеленую

. Вы можете использовать это простая логика c на несколько вещей

Answer 3

при условии, что эти компоненты имеют свои уникальные свойства (или вы должны добавить их), вы можете добавить изменить их className, например className = {this.state.selectedComponent === "uniqueID"? "activeClassName": ""} при наличии свойства состояния (selectedComponent), которое устанавливается на это уникальное свойство при onClick