Реагируйте на события SVG - PullRequest
Новая
       0

Реагируйте на события SVG

0 голосов
/ 08 ноября 2019

Я пытаюсь присоединить обработчик событий к элементу SVG в React, но обработчик событий никогда не выполняется. Прикрепление его вручную в консоли после загрузки работает просто отлично. Установка точки останова для событий мыши показывает, что код обработки событий Reacts выполняется, но мой обработчик никогда не достигается. Мне кажется, что я делаю что-то совершенно очевидное неправильно. 

class PianoKeyboard extends React.Component<{}, {}> {
    constructor(props: {}) {
        super(props)
    }

    render() {
        return (
            <svg width="100%" viewBox="0 0 1120 400" version="1.1">
                <title>Piano Keyboard</title>
                <defs/>
                <g id="piano-keyboard">
                    <g id="octave-1">
                        <rect id="octave-1-C-key" className="piano-key white-key" data-piano-key="C" stroke="#555555"
                              fill="#FFFFF7" x="0" y="0" width="80" height="400"
                              onTouchStart={this.touchStart}
                              onTouchEnd={this.touchEnd}
                              onClick={this.onClick} />

          /* Rest of the keys here... */

                    </g>
                </g>
            </svg>);
    }

    audioCtx: AudioContext | null = null;
    osc: OscillatorNode | null = null;

    touchStart = (event: React.TouchEvent<SVGRectElement>) => {
    // start oscillator 
    };

    touchEnd = (event: React.TouchEvent<SVGRectElement>) => {
    // stop oscillator 
    };

    onClick = (event: React.MouseEvent<SVGRectElement, MouseEvent>) => {
    // start oscillator and stop it after timeout
   };
}
...