React & SVG: Как мне сделать поддержку <path> onClick?

Это то, что поддерживает React SVG: http://facebook.github.io/react/docs/tags-and-attributes.html#svg-attributes

Я пытаюсь понять, как сделать фигуру, которую я рисовал, используя путь SVG, который можно щелкнуть. Если есть другой способ нарисовать фигуру, которая может быть сделана кликабельной, это тоже работает.

Спасибо!

Ответ 1

Я переношу SVG с помощью div и применяю любые необходимые мне атрибуты (обработчики кликов, цвета заливки, классы, ширина и т.д.), like поэтому (ссылка на скрипку):

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

Вы можете, конечно, обрезать обертку и применить onClick к элементу svg, но я нашел, что этот подход работает хорошо для меня! (Я также стараюсь использовать чистые функции, когда это возможно https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc)

Ответ 2

Я сделал это следующим образом:

Просто используя polyline, например, это может быть любой элемент 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}/>;
    }
}

get ref в обратном вызове ref
on componentDidMount добавьте прослушиватель событий click в ref
удалить прослушиватель событий в компонентеWillUnmount

Ответ 3

Вы можете использовать onClick, как и для других элементов DOM.

Ответ 4

У меня была аналогичная проблема с ответом, я пытался обработать событие onclick для svg.

Простая проблема с css для меня:

svg {
    pointer-events: none;
}