如何在无状态组件中使用“this”变量来处理鼠标事件答案

【问题标题】：How to use "this" variables in stateless component to handle mouse events如何在无状态组件中使用“this”变量来处理鼠标事件
【发布时间】：2020-01-04 12:28:08
【问题描述】：

假设我有这个类组件，我必须在其中检查鼠标是否按住单击、跟踪坐标并做一些事情。我曾经创建类，我可以在其中存储“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>
}

感谢您的宝贵时间！

【问题讨论】：

标签： javascript reactjs functional-programming react-hooks

【解决方案1】：

阅读有关 useRef 和 useCallback 挂钩的更多信息。使用这些，您可以在功能组件内创建对变量和回调的独立于状态的引用。

Hooks reference in React.js docs

这是你的类组件逻辑重构为使用钩子：

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>
}

【讨论】：

【解决方案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>
}

【讨论】：