React and Electron, Цепные обработчики событий

Question

Есть ли способ связать обработчики событий в React / JavasSript для создания большей функциональности?

В приведенном ниже коде в div class=resizer мне нужно событие, которое допускает отключение мышинажмите кнопку, затем «перетаскивание мышью» перед выполнением функции.

const remote = window.require('electron').remote

const TitlebarDev = () => {

    const window = remote.getCurrentWindow()

    // allows top side resizer with click to restore
    const resizerRestore = () => {
        window.restore()
    }

    const resizerMoveRestore = () => {
        window.restore()
    }

    return (
        <div className="TitlebarDev">
            <div className="Title-BarDev">
                <div className="TitlebarDev-drag-region"></div>
                <div className="Title-BarDev__section-icon">
                </div>
                <div className="Title-BarDev__section-menubar">
                    <div><p>hi</p></div>
                </div>
                <div className="Title-BarDev__section-title">
                    <div className="section-title__title"><p>Node Debug</p></div>
                </div>
                <div className="Title-BarDev__section-windows-control">
                </div>
                <div
                    onDoubleClick={resizerRestore}
                    // needs mouse click down then drag event
                    onMouseDown={resizerMoveRestore}
                    className="resizer">
                </div>
            </div>
        </div >
    )
}

export default TitlebarDev

Answer 1

Как я уже упоминал в комментарии, вам нужно сохранять состояние вашего первого состояния и проверять его при наступлении второго события.

В следующем базовом примере Vanilla JS я разрешил перемещениеfoo элемент только после того, как нажал (и только когда мышь еще не нажата). Для этой проверки состояния я использовал переменную isClicked.

const element = document.getElementById('foo');
var isClicked = false;

element.addEventListener('mousedown', function() {
  isClicked = true;
});

element.addEventListener('mouseup', function() {
  isClicked = false;
});

document.addEventListener("mousemove", function(event) {
  if (isClicked) {
    element.style.left = (event.clientX - 25) + 'px';
    element.style.top = (event.clientY - 25) + 'px';
    // Please note that I arbitrarily chosen foo's
    // width and height to be 50px, hence the 25px offset
  }
});

#foo {
  width: 50px;
  height: 50px;
  background-color: tomato;
  position: absolute;
}

<div id="foo"></div>

Если вы используете React, вы всегда можете (и предпочтительно) использовать свой state для хранения этих ... состояний;)