0
147
Visualizações¿Número de adición de reacción durante el botón LongPress?
Tengo dos botones (Agregar y míos) que quiero, siempre que presione el botón Agregar , se agrega constantemente al número central y también cuanto más lo presione, se agrega más rápido
Probé setTimeout y setInterval pero no funcionó.
esto es lo que tengo, alguna sugerencia?
const [amount, setAmount] = useState(0);--
<IconButton onClick={handlePlus} className="payout__icon-button"> <Add /> </IconButton> {amount} <IconButton onClick={handleMinus} className="payout__icon-button"> <Remove /> </IconButton>--
const AMOUNT_UNIT = 10000; function handlePlus() { let val; val = amount + AMOUNT_UNIT; setAmount(val); } function handleMinus() { var val = 0; val = amount - AMOUNT_UNIT; setAmount(val); } }
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
Pseudocódigo:
yarn add use-long-press // or npm install --save use-long-press import React from 'react'; import { useLongPress } from 'use-long-press'; const Example = () => { const bind = useLongPress(() => { console.log('Long pressed!'); val = amount + AMOUNT_UNIT * 3; }); return <button {...bind}>Press me</button>; };
·
Juan Pablo Isaza
Relatório
0
Encontré la respuesta yo mismo, esto funciona muy bien para mí y al presionar prolongadamente, siga agregando y acelerando cuanto más mantenga presionado el botón.
Yo uso este paquete:
yarn add use-long-press // or npm install --save use-long-pressestas son mis funciones:
let myTimeout; let longpressActive = false; let onPressValue = 0; let n = 200; // this is 200ms for interval func function stopInterval() { clearInterval(myTimeout); if (longpressActive) { setAmount(parseInt(onPressValue)); // bind on press data longpressActive = false; } } // for onclick func function handlePlus() { let val; val = amount + AMOUNT_UNIT; setAmount(val); } // for longPress func function increment() { longpressActive = true; //Stop the interval in essence let myInputRef = document.querySelector(".payout__price"); onPressValue = parseInt(amount); myTimeout = setInterval(function runIncrement() { //Start the timeout which is really a controlled interval if (onPressValue < props.balance) { onPressValue += AMOUNT_UNIT; myInputRef.innerText = onPressValue; if (n > 60) { n = n - 20; } clearInterval(myTimeout); myTimeout = setTimeout(runIncrement, parseInt(n)); } else { clearInterval(myTimeout); setAmount(parseInt(props.balance)); chengeCurve(props.balance); } // setAmount(amount+50); }, n); //Start the interval with an initial time of 35 milliseconds //Now we know when the interval started, and we can } const Add_Long_Press_plus = useLongPress(() => { console.log("Long pressed!"); increment(); // val = amount + AMOUNT_UNIT * 3; });Y este es mi JSX:
<IconButton onClick={handlePlus} onMouseUp={stopInterval} className="payout__icon-button" > <Add {...Add_Long_Press_plus} /> </IconButton> <div className="payout__price">{amount}</div>
·
Juan Pablo Isaza
Relatório
Responde à pergunta