如何在無狀態組件中使用“this”變量來處理鼠標事件

Question

假設我有這個類組件，我必須在其中檢查鼠標是否按住單擊、跟蹤坐標並執行一些操作。 我曾經創建過一個類，我可以在其中存儲“this”變量以通過組件訪問它們。 如何在不需要創建類的情況下處理功能組件中的這些類型的變量？ 我知道舊方法只有在狀態改變時（理想情況）才會重新渲染狀態，使用新方法會有點問題，對吧？ 在我的情況下，我需要通過組件中的其他函數使用 this.increment 變量（以及更多）。

class MyComp extends React.Component{
    onMouseDown(e){
        this.isMouseDown = true;
        this.startX = e.clientX
        this.startY = e.clientY
    }
    onMouseMove(e){
        let x = e.clientX;
        let y = e.clientY;
        if (this.isMouseDown){
            this.increment = this.startY - y
            // do stuff with this.startX and this.startY
            // ....
        }
    }
    onMouseUp(){
        this.isMouseDown = false;
    }
    render() {
        return <div onMouseDown={this.onMouseDown.bind(this)}
                    onMouseMove={this.onMouseMove.bind(this)}
                    onMouseUp={this.onMouseUp.bind(this)} />
    }
}

如何使用這樣的功能組件實現相同的功能？

function MyComp ({ text }) {
    return  <div onMouseDown={e => onMouseDown(e)}
                onMouseMove={e => onMouseMove(e)}
                onMouseUp={e => onMouseUp(e)}>
                {text}
            </div>
}

謝謝你的時間！

Answer 1

閱讀有關 useRef 和 useCallback 鈎子的更多信息。 使用這些，您可以在功能組件內創建與狀態無關的變量和回調引用。

React.js 文檔中的鈎子參考

這是重構為使用鈎子的類組件邏輯：

function MyComp ({ text }) {
    const trackData = React.useRef({});

    const onMouseDown = React.useCallback((e) => {
        trackData.current.isMouseDown = true;
        trackData.current.startX = e.clientX
        trackData.current.startY = e.clientY
    }, [trackData]);

    ...

    return  <div onMouseDown={e => onMouseDown(e)}
                onMouseMove={e => onMouseMove(e)}
                onMouseUp={e => onMouseUp(e)}>
                {text}
            </div>
}

Answer 2

JS 允許在函數內部創建函數。 您可以創建一個功能性 React 組件，該組件幾乎沒有可用作您的需求的函數定義，如下所示：

function MyComp ({ text }) {
    const onMouseDown = (evt) => {
        ... //your code goes here
    }
    ... // same for onMouseMove & onMouseUp
    return  <div onMouseDown={e => onMouseDown(e)}
                onMouseMove={e => onMouseMove(e)}
                onMouseUp={e => onMouseUp(e)}>
                {text}
            </div>
}