Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React - Button Pressed, keep calling function

I'm trying to implement a zoom function. onClick works fine, but I'd like to have it when I hold the zoom button down, it zooms continuously. How can I implement this with ReactJS?

Jquery: mousedown effect (while left click is held down) I was using this as a template, but onMousedown doesn't get registered according to 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;
};
like image 656
Tai Avatar asked Oct 18 '16 17:10

Tai


People also ask

How do you call a function on button click in React JS?

Example: Call a Function After Clicking a Buttonimport React from 'react'; function App() { function sayHello() { alert('Hello!' ); } return ( <button onClick={sayHello}> Click me!

How do I beat onClick as a prop?

When you add an onClick prop to the LinkButton component, it is just a property of an object. By calling props. onClick from inside of that component you are just calling a function that is stored inside of a property, similar to this: let props = { onClick: function () { alert("Executed!"); } }; props.

How do you pass arguments to onClick in React?

In order to pass a value as a parameter through the onClick handler we pass in an arrow function which returns a call to the sayHello function. In our example, that argument is a string: 'James': ... return ( <button onClick={() => sayHello('James')}>Greet</button> ); ...

What is e preventDefault () in React?

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be useful when: Clicking on a "Submit" button, prevent it from submitting a form. Clicking on a link, prevent the link from following the URL.


1 Answers

You need to use both mouseUp and mouseDown. Start a time on mouseDown and call the zoom function with the timeout repeatedly and clear the time on mouseUp.

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

Hope this helps!!

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>
like image 123
Pranesh Ravi Avatar answered Sep 30 '22 19:09

Pranesh Ravi