Question

我正在尝试实现缩放功能。 onClick工作正常，但是当我按住变焦按钮时，我想拥有它，它会不断变焦。如何使用ReactJS实现此功能？

Jquery: mousedown effect (while left click is held down) 我使用它作为模板，但是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;
};

Answer 1

您需要同时使用mouseUp和mouseDown。在mouseDown上开始一段时间并重复调用zoom函数，并清除mouseUp上的时间。

Here a demo with zoomIn and zoomOut to compare and better understand the algorithm。

希望这会有所帮助!!

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>

Answer 2

如果你必须在这里做某种动画，你最好使用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> ); } }而不是设置间隔。我做这样的事情。

public static void ni_MouseClick(object sender, MouseEventArgs e)
{
    // Handle mouse button clicks.
    if (e.Button == MouseButtons.Left)
    {
        //do stuff
    }
}

Answer 3

很难掌握所有背景信息，但我会尝试给出相关答案：

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

开始

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

你声明它开始缩放，但不会停止。这让我觉得它有效，所以应该修复它。我添加了onMouseOut，因为如果他们按下按钮并将鼠标移开而不释放它，它就会继续。

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

Answer 4

我的问题是由于右键单击是主要点击或某些事情。它的工作原理很好。

反应 - 按下按钮，继续调用功能

4 个答案: