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

Question

Is there a way to chain event handlers in React/JavasSript to create more functionality?

In the code below, in the div class=resizer I am in need of an event that allows for 'mouse down click', then 'mouse drag' before the function is executed.

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

As I mentioned in the comment, you need to keep the state of your first condition and check it upon the second event taking place.

In the following basic Vanilla JS example, I allowed the movement of the foo element only after it's clicked (and only while the mouse is still down).
For this state check I've used the isClicked variable.

 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>

If you're using React, you can always (and preferably) use your state to store these... states;)