Javascript 如何访问div目标以切换react中列表组项的样式？

我正在尝试构建一组项目，您可以使用

react bootstrap

单击打开和关闭，但在访问我的函数中

列表组的目标值时遇到问题。基本上我想：

单击特定项目
单击后，将该项目变为绿色
如果任何其他项目为绿色，则应删除颜色，以便只有最近单击的项目为绿色
我尝试使用
handleCheck
函数来实现这一点，该函数使用目标值切换json属性，但无法使其工作<代码>事件.目标.值

显示

未定义

，我不确定如何进行此操作

以下是代码的工作示例：

---

您可以在

手风琴
组件中直接传递
值

import React, { useState } from "react";
import {
  Accordion,
  Card,
  ListGroup,
  DropdownButton,
  Dropdown,
  Image
} from "react-bootstrap";
import { FaChevronCircleDown, FaChevronCircleUp } from "react-icons/fa";
import classes from "./accordian.module.css";

const MainMenu = (props) => {
  const [opened, setOpened] = useState(true);

  const testingSmthFin = (x) => {
    props.testingSmthSec(x);
  };

  const handleTimer = (x) => {
    props.testingTimer(x);
  };

  let dropDown = null;
  if (props.regions) {
    dropDown = (
      <div>
        {props.regions.map((region, i) => {
          return (
            <div key={i}>
              <ListGroup.Item
                value={region.region}
                style={{
                  backgroundColor: region.isChecked ? "#90EE90" : "White"
                }}
                onClick={(e) => props.handleCheck(region.region, i)} //<------------------
              >
                {region.region}
              </ListGroup.Item>
            </div>
          );
        })}
      </div>
    );
  }

  return (
    <Accordion
      defaultActiveKey={props.showAccordian}
      className={classes.mainMenu}
    >
      <Card style={{ padding: 10, backgroundColor: "#ffffff78" }}>
        <Accordion.Toggle
          as={Card.Header}
          eventKey="0"
          style={{ padding: 10, backgroundColor: "#3f4042ba" }}
          onClick={() => setOpened(!opened)}
        >
          <text style={{ color: "beige", fontWeight: "bolder" }}> </text>
          <text style={{ color: "beige" }}>: MY ACCORDIAN </text>
          {opened ? (
            <FaChevronCircleUp color="white" />
          ) : (
            <FaChevronCircleDown color="white" />
          )}
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="0">
          <Card.Body
            style={{
              padding: 10,
              backgroundColor: "white",
              borderRadius: "3%"
            }}
          >
            <ListGroup>
              <ListGroup.Item></ListGroup.Item>
            </ListGroup>
          </Card.Body>
        </Accordion.Collapse>
        <Accordion.Collapse eventKey="0">
          <Card.Body
            style={{
              padding: 10,
              backgroundColor: "white",
              marginTop: 10,
              borderRadius: "3%"
            }}
          >
            <Card.Title style={{ textAlign: "center" }}>
              Check region
            </Card.Title>
            <ListGroup>
              {/* <ListGroup.Item 
                onClick={props.sliceGeo} 
                style={{ backgroundColor: props.checked ? '#90EE90' : 'White' }} 
              >Citywide
              {
                props.checked ?
                <Image
                  style={{marginLeft: '50%'}} 
                  src={checked} 
                  width="20"
                  height="20"
                /> : <div></div>
              }      
              </ListGroup.Item> */}
              {dropDown}
              {/* <ListGroup.Item >Midtown</ListGroup.Item>
              <ListGroup.Item>Queens</ListGroup.Item>
              <ListGroup.Item>Brooklyn</ListGroup.Item>
              <ListGroup.Item>Bronx</ListGroup.Item>
              <ListGroup.Item>Staten Island</ListGroup.Item> */}
            </ListGroup>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
  );
};

export default MainMenu;

import React，{useState}来自“React”；
进口{
手风琴，
卡片
列表组，
下拉按钮，
下拉列表，
形象
}从“反应引导”；
从“react icons/fa”导入{FaChevronCircleDown，FaChevronCircleUp}；
从“/accordian.module.css”导入类；
常量主菜单=（道具）=>{
const[opened，setOpened]=useState（true）；
常数测试SMTHFIN=（x）=>{
道具测试秒（x）；
};
常数handleTimer=（x）=>{
道具测试计时器（x）；
};
let dropDown=null；
if（道具区域）{
下拉菜单=(
{props.regions.map（（region，i）=>{
返回(
props.handleCheck（region.region，i）}//
{region.region}
);
})}
);
}
返回(
setOpened（！opened）}
>
：我的手风琴
{打开了吗(
) : (
)}
检查区域
{/*全市
{
道具检查过了吗？
: 
}      
*/}
{下拉列表}
{/*市中心
皇后区
布鲁克林
布朗克斯
斯塔顿岛*/}
);
};
导出默认主菜单；

handleCheck=（值，键）=>{/最终输出：


import React，{Component}来自“React”；
从“/accorbian”导入手风琴；
常数数据=[
{地区：“全市范围”，勾选：假}，
{地区：“市中心”，勾选：假}，
{地区：“女王”，被选中：假}，
{地区：“布鲁克林”，被勾选为：假}，
{地区：“布朗克斯”，被勾选为：假}，
{地区：“斯塔顿岛”，已勾选：假}
];
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
区域：数据
};
}
handleCheck=（事件、键）=>{
//
handleCheck = (value, key) => {                      // <---------------------
    //copy all items
    let regions = [...this.state.regions];
    //extract the itemn we care about
    let item = { ...regions[key] };

    //for the extacted item, check it
    //item.isChecked = !item.isChecked;

    //MY ATTEMPT BELOW
    console.log(value);                         // <---------------------------
    // regions.map((item) => {
    //   if (item.region === event.target.value) {
    //     item.isChecked = true;
    //   } else {
    //     item.isChecked = false;
    //   }
    // });

    //reassign value
    regions[key] = item;

    this.setState({ regions });
    console.log(regions);
  };