добавить цвет фона onClick в реакции

Question

так что у меня есть этот flexbox:

[! [Flexbox] [1]] [1]

мне нужно это:

когда я нажимаю на любой divs слева от обзора вниз, мне нужно, чтобы он был окрашен в белый цвет фон, как на изображении, я новичок, чтобы реагировать, и я пытаюсь go через этот проект, может ли кто-нибудь помочь мне с этим Я застрял.

пока код:

flexbox. js:

const sidebar = (props) => (
    <div>
        <div className="container">
            <div className="flex-item item-1" onClick={}>John Smith</div>
            <div className="flex-item item-2">Male, 26 years old</div>
            <div className="flex-item item-3">Overview</div>
            <div className="flex-item item-4">Alerts</div>
            <div className="flex-item item-5">Recent</div>
            <div className="flex-item item-6">Blood Pressure</div>
            <div className="flex-item item-7">Body Weight</div>
            <div className="flex-item item-8">Glucose</div>
            <div className="flex-item item-9">SpO2</div>
            <div className="flex-item item-10"><FontAwesomeIcon icon={faCog}/></div>
        </div>
    </div>
);

flexbox. css:

.container {
    border: 2px solid #57c0e8;
    background-color: #57c0e8;
    margin-top: 4%;
    float: left;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    color:white;
    display: flex;
    flex-direction: column;
    height:40rem;
    width:15rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    font-size:0.9rem;
}

.flex-item{
    margin-top: 2rem;
}

.item-2 {
    margin-top: 0rem;
}

.item-3 {
    margin-top: 5rem;
}

.item-10{
    align-self:center;

}

Answer 1

Если вы действительно хотите сохранить свой код в том виде, в каком он есть сейчас, вы можете просто добавить класс для каждого гибкого элемента и onClick метод, чтобы добавить класс для выбранного элемента и удалить класс для остальных.

вот как вы можете это сделать:

const MyList = () => {
  const setSelectedItem = e => {
    Array.from(document.getElementsByClassName("item"))
      .forEach(item => item.classList.remove("selected"));
    e.target.classList.add("selected");
  };

  return (
    <div>
      <ul>
        <li className="item" onClick={setSelectedItem}>
          item 1
        </li>
        <li className="item" onClick={setSelectedItem}>
          item 2
        </li>
        <li className="item" onClick={setSelectedItem}>
          item 3
        </li>
        <li className="item" onClick={setSelectedItem}>
          item 4
        </li>
      </ul>
    </div>
  );
};

Но я предлагаю вам провести рефакторинг вашего кода, чтобы динамически строить список боковой панели. Это будет намного проще управлять. Вы можете сделать это таким образом, с массивом, содержащим ваши данные и перебирая их:

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

const App = () => {
  const data = [
    { name: "item 1", isSelected: false },
    { name: "item 2", isSelected: false },
    { name: "item 3", isSelected: false },
    { name: "item 4", isSelected: false }
  ];

  const [items, setItems] = React.useState(data);

  const setSelectedItem = selectedItem => {
    const newItems = [...items];
    newItems.forEach(item => {
      item.isSelected = item.name === selectedItem.name;
    });
    setItems(newItems);
  };

  const buildList = () => {
    return items.map(item => (
      <li className={item.isSelected ? 'selected':''} onClick={() => setSelectedItem(item)}>
        {item.name}
      </li>
    ));
  };
  return <ul>{buildList()}</ul>;
};

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

Затем вам нужно только написать css на .selected:

li{
  padding: 10px;
}

.selected{
  background-color: lightskyblue;
  border-radius: 50px 0 0 50px;
  box-shadow: 2px 2px 5px lightgray;
}

Вот репродукция на stackblitz .

Здесь используется список, но он ничего не меняет по сравнению с тем, как вы используете flexbox.

Answer 2

Хорошо, поэтому я думаю, вы могли бы сделать это, сделав активный класс в вашем css, чтобы сделать его белым:

.sidebarActive {
    background:#fff
    ...
    ...
}

Затем добавьте состояние к вашему компоненту, которое может хранить строка (Или я думаю, это может быть число, и вы можете сохранить индекс выбранного div). Это будет выглядеть примерно так:

const sidebar = (props) => {
    const [selectedDiv,setSelectedDiv] = React.useState(null)

    return (
        <div>
            <div className="container">
                <div className="flex-item item-1" onClick={}>John Smith</div>
                ...
            </div>
        </div>
    )
}

Затем ваша функция onClick должна установить состояние на правильный div:

<div className="flex-item item-1" onClick={()=>setSelectedDiv('John Smith')}>John Smith</div>

И, наконец, вам нужно добавить условие в className s из div s - чтобы проверить, выбирает ли это состояние div:

<div className={
    selectedDiv === "John Smith"
        ?
    "flex-item item-1 sidebarActive"
        :
    "flex-item item-1"
    }
    onClick={...}
>
    John Smith
</div>

Есть много способов оптимизировать это - например, добавление ваших div в массив, поэтому что вам не нужно набирать «Джон Смит», «Обзор», «Оповещения» и все остальное по несколько раз.

Но этой информации должно быть достаточно, чтобы вы куда-то пришли!

Надеюсь, это поможет :)