单击时样式反应组件

Question

所以我有这个简单的名称 div：

我只想按下其中一个并获得绿色背景色，当按下另一个时，第一个将被取消，因此一次只有一个被着色。我只需要内联样式或者我不知道我卡住了。

first.js:

从 'react' 导入 React；

function SidebarComponents({name,title,selected,onSelect}) {

    const style={
        cursor: "pointer"
    };

    const classes = {
        selected: {
          backgroundColor: '#00ff00'
        }
      }

    return (
        <div 
            name={name}
            title = {title}
            style={style}
        >
           {name}
        </div>
    )

}
export default SidebarComponents;

second.js:

import React, { useEffect, useState } from "react";
import SidebarComponents from "../SidebarComponents/SidebarComponents";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../Sidebar1/Sidebar.css';

function Sidebar({ onChange }) {
  const [selectedComponent, setSelectedComponent] = useState({
    componentsName: [
      { name: "John Smith", title: "John Smith" },
      { name: "Male, 26 years old", title: "Gender and age" },
      { name: "john", title: "Alerts" },
      { name: "claude", title: "Recent" },
      { name: "edward", title: "Blood pressure" },
      { name: "mira", title: "Body weight" },
      { name: "alex", title: "Glucose" },
      { name: "zac", title: "SPO2" }
    ]
  });

  return (
    <div>
      {selectedComponent.componentsName.map(component => {
        return (
            <div className="row align-items-start sidebar-components">
                <div className="col">
                    <SidebarComponents 
                    name={component.name} 
                    title={component.title} 
                    />
                </div>
          </div>
        );
      })}
    </div>
  );
}

export default Sidebar;

Answer 1

在边栏上：

const [selectedName, setSelectedName] = useState(null);
//...
<SidebarComponents 
  name={component.name} 
  title={component.title}
  selected={component.name === selectedName}
  onSelect={setSelectedName}
/>

在 SidebarComponents 上：

const selectedClassName = selected ? 'selected' : '';

//...

<div 
  name={name}
  title={title}
  style={style}
  className={`sidebar ${selectedClassName}`} //you must add sidebar and selected classes to your styles
  onClick={() => onSelect(name)}
>
  {name}
</div>

Answer 2

将关键属性添加到地图内的 div。
Handel onClick 事件，将所选元素存储在您的状态中index/value。
使用 className 的条件呈现来应用样式。

second.js

<div>
  {selectedComponent.componentsName.map((component, index) => {
    return (
      <div key={index} onClick={() => handelOnClick(index)} className="row align-items-start sidebar-components">
        <div className="col">
          <SidebarComponents 
            name={component.name} 
            title={component.title} 
            className={selectedIndex === index ? 'highlight' : ''}
          />
        </div>
      </div>
    );
  })}
</div>

当您在 first.js 中呈现文本时，无需使用 div 包装器，请使用 'p'、'span' 标签
在 second.js 中而不是迭代整个 div 块，使用 ul li

单击时样式反应组件

style react component on click

components

styling

reactjs