Javascript 反应-按下按钮，保持呼叫功能

我正在尝试实现一个缩放功能。onClick工作得很好，但我希望当我按住缩放按钮时，它会连续缩放。如何使用ReactJS实现这一点

我使用它作为模板，但是onMousedown没有根据console.log注册

<div className="zoomControl" >
                        <button className="zoomIn" onMouseDown={this.zoomIn}>+</button>
                        <button className="zoomOut" onClick={this.zoomOut}>-</button>
                </div>

---

您需要同时使用

mouseUp

和

mouseDown

。在

mouseDown

上启动一个时间，并反复调用

zoom

函数，并在

mouseUp

上清除时间

希望这有帮助

类缩放扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
缩放：1，
}
this.t=未定义
这个。开始=100
this.repeat=this.repeat.bind（this）
this.onMouseDown=this.onMouseDown.bind（this）
this.onMouseUp=this.onMouseUp.bind（this）
this.zoom=this.zoom.bind（this）
this.zoomOut=this.zoomOut.bind（this）
}
缩放（）{
this.setState（{zoom:this.state.zoom+0.1}）
}
重复（）{
this.zoom（）
this.t=setTimeout（this.repeat，this.start）
this.start=this.start/2
}
onMouseDown（）{
这个。重复（）
}
onMouseUp（）{
clearTimeout（this.t）
这个。开始=100
}
zoomOut（）{
这是我的国家({
缩放：1
})
}
render（）{
返回
+
-
}
}
ReactDOM.render（，document.getElementById（'app'））

正文{
溢出：隐藏
}
.zoom{
宽度：20px；
高度：20px；
保证金：0自动；
背景：红色；
}

---

很难了解所有的上下文，但我会尝试给出一个相关的答案：

当您释放按钮时，没有任何属性设置来调用zoomMouseUp。首先，我要说：

<button className="zoomIn" onMouseDown={this.zoomIn} onMouseUp={this.zoomMouseUp} onMouseOut={this.zoomMouseUp}>+</button>

+

您声明它开始缩放，但没有停止。这让我假设它正在工作，所以这可能会解决它。我添加了onMouseOut，因为如果他们按下按钮并将鼠标移开而不释放鼠标，它将继续

---

有很多方法可以做到这一点，但这可能是你所拥有的最简单的方法。

我的问题是因为右键单击是主要的单击或类似的操作。它可以正常工作。

如果必须在此处制作某种动画，最好使用

requestAnimationFrame

而不是设置间隔。我会这样做

class App extends React.Component {
    state = {
        value: 0,
        mousedown: false
    }

    zoom = () => {
        if (this.state.mousedown) {
            this.setState({ value: this.state.value + 1},
                () => { window.requestAnimationFrame(this.zoom) }
            )
        }
    }

    zoomIn = () => {
        window.requestAnimationFrame(this.zoom);
    }

    toggleMouseDown = () => {
        this.setState({
            mousedown: !this.state.mousedown
        });
        this.zoomIn()
    }

    render() {
        return(
            <div>
                <button
                    onMouseUp={this.toggleMouseDown}
                    onMouseDown={this.toggleMouseDown}>
                    Click me
                </button>
                {/* The rest of your component goes here */}
            </div>
        );
    }
}

类应用程序扩展了React.Component{
状态={
值：0，
穆斯敦：错
}
缩放=（）=>{
if（this.state.mousedown）{
this.setState（{value:this.state.value+1}，
（）=>{window.requestAnimationFrame（this.zoom）}
)
}
}
zoomIn=（）=>{
window.requestAnimationFrame（this.zoom）；
}
toggleMouseDown=（）=>{
这是我的国家({
mousedown:！this.state.mousedown
});
这个.zoomIn（）
}
render（）{
返回(
点击我
{/*组件的其余部分放在这里*/}
);
}
}

此外，如果您从事件中返回false以尝试停止它，则在React中，这将不再起任何作用。如果您试图执行以下任一操作，则需要获取event属性并调用event.stopPropagation（）或event.preventDefault（）。当我执行onClick={this.zoomIn}时，它可以用于一次性缩放。但是当我点击onMouseDown时，它不会被注册。有什么原因吗？OnMouseUp不注册。

class App extends React.Component {
    state = {
        value: 0,
        mousedown: false
    }

    zoom = () => {
        if (this.state.mousedown) {
            this.setState({ value: this.state.value + 1},
                () => { window.requestAnimationFrame(this.zoom) }
            )
        }
    }

    zoomIn = () => {
        window.requestAnimationFrame(this.zoom);
    }

    toggleMouseDown = () => {
        this.setState({
            mousedown: !this.state.mousedown
        });
        this.zoomIn()
    }

    render() {
        return(
            <div>
                <button
                    onMouseUp={this.toggleMouseDown}
                    onMouseDown={this.toggleMouseDown}>
                    Click me
                </button>
                {/* The rest of your component goes here */}
            </div>
        );
    }
}