如何在点击反应时更改 div 的样式？

Question

我对反应还很陌生，我正在做一个项目，我想在上面的图片中点击突出显示（更改 css 类名）任何这些列表项。

我查看了堆栈和在线，找不到任何适合我的东西。

这是我到目前为止所做的，当我使用它时 CSS 没有改变，我在控制台日志中收到一条错误消息：“未捕获的类型错误：无法设置 null 的属性（设置 'onclick')"

任何帮助或指点将不胜感激，下面是代码

反应代码


//I just kept in what I'm attempting

const [changeStyle1, setChangeStyle1] = useState(false);

const changeLiStyle = () => {
    setChangeStyle1(true);
}



    
    return (
        <div>
            <ul className='editElectrodeBox'>
                <li className={changeStyle1 ? 'electrodeBoxItem selector' : 'electrodeBoxItem'} onClick={changeLiStyle} id='elementOne'>Magnesium</li>

CSS


.editElectrodeBox {
  height: 35vh;
  list-style: none;
  overflow-y: scroll;
  background-image: linear-gradient(to left, rgb(162, 234, 142) , rgb(118, 203, 240));
}

.electrodeBoxItem {
  padding: 20px;
  cursor: pointer
}

.selected {
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  color: whitesmoke;
}

Answer 1

我认为问题是调用了不正确的类名

所以我会将选择器更改为选中

<li className={changeStyle1 ? 'electrodeBoxItem selected' : 'electrodeBoxItem'} onClick={changeLiStyle} id='elementOne'>Magnesium</li>

而不是

<li className={changeStyle1 ? 'electrodeBoxItem selector' : 'electrodeBoxItem'} onClick={changeLiStyle} id='elementOne'>Magnesium</li>

如何在点击反应时更改 div 的样式？

How to change the style of a div on click in react?

css

reactjs