javascript - 制作一个不会触发 mouseLeave 的可点击 SVG

Question

我正在尝试做的事情：

• 当您将鼠标悬停在该行上时，颜色会发生变化并出现 SVG
• 您可以单击 SVG（当前在控制台中显示“单击”）来触发函数（也需要支持触发外部函数，而不仅仅是需要在 svg 内的脚本标签中定义的函数，例如 props 函数）
• 当您的鼠标离开时，该行将恢复为原始形式

问题：

• 如果 pointer-events 未设置为 none，则将鼠标悬停在 SVG 按钮上会触发 mouseLeave（离开行）。如果设置为 none，SVG 按钮将变得不可点击。
• SVG 内部的 onClick 似乎不支持外部函数（例如 props 函数）

非常感谢您的帮助。

const { Container, Row, Col} = ReactBootstrap;
function Library(props){
  
  function handleMouseEnter(e){
    e.style.background = 'blue';
    var targetNode = e.querySelector(`#content`);
    ReactDOM.render(                
      <svg  width="0.75rem" height="0.75rem" className="Layer_1" x="0px" y="0px" viewBox="0 0 472.615 472.615" fill="white">   
        <polygon onClick={e => console.log('clicked')} points="50.273,0 50.273,472.615 422.342,236.308"/>
      </svg>
      , targetNode);
  }
  
  function handleMouseLeave(e){
    e.style.background = '';
    var targetNode = e.querySelector(`#content`);
    ReactDOM.render(                
      "hover over me and click the button!"
      , targetNode);
  }
  
  return(
  <Container>
    <Row 
    onMouseEnter={e => handleMouseEnter(e.target.closest('.row'))}
    onMouseLeave={e => handleMouseLeave(e.target.closest('.row'))}
    >
      <Col>
        <div id="content">
          hover over me and click the button!
        </div>        
      </Col>
    </Row>
  </Container>
  )
}

ReactDOM.render(
  <Library/>,
  document.getElementById('root')
);

.row{
background:red;
}
svg{
pointer-events:none;
}

<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>
<div id="root"></div>

标签： javascriptcssreactjseventsreact-bootstrap

Answer 1

也许您可以尝试使用useState条件渲染

import { useState } from "react";
import { ReactComponent as Icon } from "./Icon.svg";

const YourApp = () => {
  const [onHover, setOnHover] = useState(false);

  const handleMouseEnter = () => {
    setOnHover(true);
  };
  const handleMouseLeave = () => {
    setOnHover(false);
  };

  return (
    <div
      style={onHover ? { background: "blue" } : { background: "red" }}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {onHover && <Icon onClick={(e) => console.log("clicked")} />}
      hover over me and click the button!
    </div>
  );
};

export default YourApp;