反应-按钮按下，继续调用函数

React - Button Pressed, keep calling function

本文关键字：继续 调用 函数 按钮 反应      更新时间：2023-09-26

我正在尝试实现缩放功能。onClick工作得很好，但我想让它当我按住缩放按钮，它不断缩放。我怎么用ReactJS实现这个?

Jquery: mousedown效果(左键按住时)我使用这个作为模板，但onMousedown不注册根据console.log

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


zoomIn = () => {
    console.log('test');
    var self = this;
    this.timeout = setInterval(function(){
    // Do something continuously
        this.renderer.zoomIn();
    }, 100);
    return false;
};
zoomMouseUp = () => {
    clearInterval(this.timeout);
    return false;
};

需要同时使用mouseUp和mouseDown。

在mouseDown上启动时间，在zoom上反复调用超时函数，在mouseUp上清除时间。

这里有一个zoomIn和zoomOut的演示，以比较和更好地理解算法。

希望这有帮助!!

class Zoom extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
       zoom: 1,
     }
     this.t = undefined
     this.start = 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)
   }
   zoom(){
     this.setState({zoom: this.state.zoom + 0.1})
   }
   repeat() {
     this.zoom()
     this.t = setTimeout(this.repeat, this.start)
     this.start = this.start / 2
   }
   onMouseDown() {
     this.repeat()
   }
   onMouseUp() {
     clearTimeout(this.t)
     this.start = 100
   }
   zoomOut(){
     this.setState({
       zoom: 1
     })
   }
  
  render() {
    return <div className="zoomControl" >
      <div className="zoom" style={{transform: 'scale('+ this.state.zoom +')'}}></div>
      <button className="zoomIn" onMouseUp={this.onMouseUp} onMouseDown={this.onMouseDown}>+</button>
      <button className="zoomOut" onClick={this.zoomOut}>-</button>
    </div>
   }
}
  
  ReactDOM.render(<Zoom/>, document.getElementById('app'))
body {
  overflow: hidden
}
.zoom {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

如果你必须在这里做一些动画，你最好使用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>
        );
    }
}

很难得到所有的上下文，但我会尽量给出一个相关的答案:

你没有设置任何属性来在释放按钮时调用zoomMouseUp。我从

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

你说它开始缩放，但没有停止。这让我觉得它起作用了，所以这应该能解决问题。我添加了onMouseOut因为如果他们按下按钮并移动鼠标而不释放它，它会继续。

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

我的问题是由于右键是主要的点击或一些东西沿着线。

相关文章：