在反应中的点击时添加背景色

Question

所以我有这个flexbox。

[! [flexbox][1]][1]

我需要的是这样的。

当我按任何divs在左边的概述到底部，我需要它的背景颜色为白色，就像在图像中，我是新的反应，我试图通过这个项目，任何人都可以帮助我，我卡住了。

到目前为止的代码。

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

如果你真的想保持你的代码，你可以简单地在每个flex项目上添加一个类和一个 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>
  );
};

但我建议你重构你的代码，以dinamically方式建立你的侧栏列表，这将是更容易管理的方式。你可以这样做，用一个包含你的数据的数组并在它上面循环。

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;
}

这里是 在堆栈闪电战中重现.

这里使用的是一个列表，但与你使用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的 divs - 检查该状态是否选择了这个。div:

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

然后有许多方法来优化它--比如将你的divs添加到一个数组中，这样你就不需要多次输入 "John Smith"、"Overview"、"Alerts "和所有其余的内容。

但是，这些信息应该足够让你有所收获了!

希望能帮到你 :)