IT技术 - react - 按钮按下，继续调用函数 - 吾爱随笔录

react - 按钮按下，继续调用函数

IT技术 javascript reactjs

2021-05-20 10:57:55

我正在尝试实现缩放功能。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;
};

4个回答

您需要同时使用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 是因为如果他们按下按钮并将鼠标移开而不释放它，它将继续。

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

我的问题是由于右键单击是主要单击或沿线的某些事情。它按原样工作正常。

其它你可能感兴趣的问题

上一篇'ControllerBase.File(byte[], string)' 是一种方法，在给定的上下文中无效 (CS0119) - 在方法中下一篇将变量从输入传递给 GraphQL 搜索调用