React & SVG: come faccio a rendere il supporto <path> onClick?

Question

Questo è ciò che Reagire SVG attualmente supporta: http://facebook.github.io/react/docs/tags-and-attributes.html#svg-attributes

Sto cercando di capire come fare un forma ho disegnato utilizzando il percorso cliccabile SVG. Se esiste un altro modo per disegnare una forma che può essere resa cliccabile, funziona anche.

Grazie!

Answer 1

Ho avuto un problema simile con reagire, stavo cercando di gestire l'evento onclick per svg.

semplice css problema risolto per me:

svg { 
    pointer-events: none; 
} 

Answer 2

ho fatto in questo modo:

usando solo polyline per esempio, potrebbe essere qualsiasi elemento SVG.

export default class Polyline extends React.Component { 

    componentDidMount() { 
     this.polyline.addEventListener('click', this.props.onClick); 
    } 

    componentWillUnmount(){ 
     this.polyline.removeEventListener('click', this.props.onClick); 
    } 

    render() { 
     const {points, style, markerEnd} = this.props; 
     return <polyline points={points} 
        ref={ref => this.polyline = ref} 
        style={style} 
        markerEnd={markerEnd}/>; 
    } 
} 

• ottenere ref in callback Rif
• su componentDidMount aggiungere click listener di eventi per l'arbitro
• rimuovere listener di eventi in componentWillUnmount

Answer 3

È possibile utilizzare onClick come si fa con altri DOM elementi.

Answer 4

ho avvolgere la mia SVG con un div e applicare tutti gli attributi che desidero (clicca gestori, colori di riempimento, le classi, larghezza, ecc ..), like so (link violino):

import React, { PropTypes } from 'react' 

function XMark({ width, height, fill, onClick }) { 
    return (
     <div className="xmark-container" onClick={onClick}> 
      <svg className='xmark' viewBox="67 8 8 8" width={width} height={height} version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> 
       <polygon stroke="none" fill={fill} fillRule="evenodd" points="74.0856176 9.4287633 71.5143809 12 74.0856176 14.5712367 73.5712367 15.0856176 71 12.5143809 68.4287633 15.0856176 67.9143824 14.5712367 70.4856191 12 67.9143824 9.4287633 68.4287633 8.91438245 71 11.4856191 73.5712367 8.91438245 74.0856176 9.4287633 74.0856176 9.4287633 74.0856176 9.4287633" /> 
      </svg> 
     </div> 
    ) 
} 
XMark.propTypes = { 
    width: PropTypes.number, 
    height: PropTypes.number, 
    fill: PropTypes.string, 
    onClick: PropTypes.func, 
} 
XMark.defaultProps = { 
    width: 8, 
    height: 8, 
    fill: '#979797', 
    onClick: null, 
} 
export default XMark 

Potrà Ovviamente rinunciare al wrapper e applicare l'onClick all'elemento svg, ma ho trovato che questo approccio funziona bene per me! (cerco anche di utilizzare le funzioni pure quando possibile https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc)