Как при клике на элемент svg менять его фон

Question

Как сделать обработчик кликов на элемент svg в react? Я знаю как сделать на 1 элемент. Я привел в коде обработчик клика для первого элемента. Но неужели мне каждому g нужно руками прописывать onClick ?

const App = (props) => {
  const [activeState, setActiveState] = React.useState(false);
  function handleClick(e) {
    setActiveState(!activeState)
  }
  return ( 
  <svg
    width={247}
    height={160}
    viewBox="0 0 247 160"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <g onClick={handleClick}>
      <rect width={57} height={62} />
      <foreignObject width={57} height={62}>
        <div className={`item ${activeState ? 'active' : ''}`}>
          <div className="category">{" Cat1"}</div>
          <div className="label">{"Label1"}</div>
        </div>
      </foreignObject>
    </g>
    <g>
      <rect x={76} width={82} height={62} />
      <foreignObject x={76} width={82} height={62}>
        <div className="item">
          <div className="category">{" Cat2"}</div>
          <div className="label">{"Label2"}</div>
        </div>
      </foreignObject>
    </g>
    <g>
      <rect x={185} width={62} height={160}  />
      <foreignObject x={185} width={62} height={160}>
        <div className="item">
          <div className="category">{" Cat3"}</div>
          <div className="label">{"Label3"}</div>
        </div>
      </foreignObject>
    </g>
    <g>
      <rect y={80} width={158} height={80} />
      <foreignObject y={80} width={158} height={80}>
        <div className="item">
          <div className="category">{" Cat4"}</div>
          <div className="label">{"Label4"}</div>
        </div>
      </foreignObject>
    </g>
  </svg>
  )
}

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

.item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:#D9D9D9
}
.item.active{
  background:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

БЛОГ НА HUSL

Как при клике на элемент svg менять его фон

Ответы (0 шт):