單擊svg元素時如何更改其背景

如何<g>使用React. 我知道如果它是 1 個元素怎么辦。但是如何為svg.

const App = (props) => {
  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">
          <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">Cat2</div>
          <div className="label">Label2</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">Cat2</div>
          <div className="label">Label2</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
}

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

uj5u.com熱心網友回復：

有很多方法可以解決這個問題。

其中之一是保留一個陣列，您將在其中保存“活動”專案，在這種情況下，我使用了一個簡單的數字 id，但可以使用map()orid={}并從 click 事件中獲取正確的 ID 來改進它。

<g>然后，如果陣列中存在 的 id，則可以更改顏色

const { useState } = React;

const App = (props) => {

  const [ active, setActive ] = useState([ ]);

  const handleClick = (n) => {
      let newActives = [ ...active ];
      
      let index = newActives.indexOf(n);
      if (index >= 0) {
        newActives.splice(index, 1);
      } else {
        newActives.push(n);
      }
      
      setActive(newActives);
  }

  const getColor = (n) => {
    return active.includes(n) ? 'red' : 'lightgrey';
  }

  return ( 
  <svg
    width={247}
    height={160}
    viewBox="0 0 247 160"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <g onClick={() => handleClick(1)}>
      <rect width={57} height={62} />
      <foreignObject width={57} height={62}>
        <div className="item" style={{ background: getColor(1) }}>
          <div className="category">Cat1</div>
          <div className="label">Label1</div>
        </div>
      </foreignObject>
    </g>
    <g onClick={() => handleClick(2)}>
      <rect x={76} width={82} height={62} />
      <foreignObject x={76} width={82} height={62}>
        <div className="item" style={{ background: getColor(2) }}>
          <div className="category">Cat2</div>
          <div className="label">Label2</div>
        </div>
      </foreignObject>
    </g>
    <g onClick={() => handleClick(3)}>
      <rect x={185} width={62} height={160}  />
      <foreignObject x={185} width={62} height={160}>
        <div className="item" style={{ background: getColor(3) }}>
          <div className="category">Cat2</div>
          <div className="label">Label2</div>
        </div>
      </foreignObject>
    </g>
    <g onClick={() => handleClick(4)}>
      <rect y={80} width={158} height={80} />
      <foreignObject y={80} width={158} height={80}>
        <div className="item" style={{ background: getColor(4) }}>
          <div className="category">Cat2</div>
          <div className="label">Label2</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
}

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

uj5u.com熱心網友回復：

您可以使用 svg 上的樣式屬性，將其存盤在 useSatate 中并在單擊時修改。

 const [color, setColor] = useState({color: 'black'});
 

 const handleClick = () => {
   setColor({color: 'green'})
 }

  return ( 
        <svg
          style={color} ... 

標籤：javascript 反应 svg

上一篇：如何從Mongoose/MongoDB中的陣列中洗掉元素？

下一篇：如何為類應用樣式