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示例中，我仅在点击鼠标后{strong> （并且仅在鼠标仍处于按下状态时）移动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存储这些...状态；）

React和Electron，链接事件处理程序

1 个答案: