Как заставить React CountUp считать от предыдущего числа?
Я новичок в React и использую React CountUp для анимации подсчета чисел, например:
<CountUp end = {totalAmount} />
Это работает — всякий раз, когда totalAmount изменяется, CountUp будет анимировать счет от 0 до любого нового числа.
Однако я хочу анимировать его, чтобы он считался от предыдущего числа. Например, если totalAmount изменится с 70 на 100, я хочу, чтобы анимация просто считала от 70. Как и сейчас, любые изменения totalAmount всегда будут начинаться с 0.
Я вижу, что есть доступная опора update, но не знаю, как ее использовать. Я пробовал:
<CountUp end = {totalAmount} update = {totalAmount} />
Я вижу, что есть способ сделать это с помощью «крючка», но, честно говоря, понятия не имею, как включить крючок в мой более широкий компонент React.
Сможет ли кто-нибудь вообще указать мне правильное направление?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Попробуйте добавить preserveValue = {true}
<CountUp end = {totalAmount} preserveValue = {true}/>
Документация
Используйте логический флаг preserveValue. Он сохраняет ранее закончившийся номер, чтобы начать с него новую анимацию.
Проверьте ссылку на Npm
<CountUp preserveValue = {true} />
Вы можете использовать функцию обратного вызова onEnd для обновления свойств доступности и установки числа после завершения каждого перехода, используя такой крючок:
const [Current, setCurrent] = React.useState(0); /* make sure you have {useCountUp} imported from countup and its is called */
const onEnd = () => {
setCurrent(totalAmount); /*Whatever you want to do here really*/
};
/*Then set component up like this */
<CountUp end = {totalAmount} start = {Current} onEnd = {onEnd}/>
Документация