Trying to Achieve:
- Changing color and displaying SVG when hovering over a row
- Clicking the SVG triggers a function, including external functions (not limited to ones defined inside script tags)
- Returning the row to its original form when mouse leaves
Challenges Faced:
- Hovering over the SVG button causes a mouseLeave event (row returns) unless pointer-events are set to none
- onClick inside SVG does not seem to support external functions (such as props functions)
Seeking assistance to address these issues.
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>