当我试图调用一个函数的callbackFinished属性内的动画winwheel我得到的功能是没有定义,而它的定义在同一个类。
import React from 'react'
import Winwheel from 'winwheel'
import TweenMax from 'gsap'
const Roulette = ({ width, height, canvasId}) => {
let winWheel = null
const wheelData = {}
const animation = {
'type': 'spinToStop',
'duration': 5,
'spins': 8,
'easing': 'Power2.easeInOut',
'callbackFinished': 'alertPrize()' //Error here, can't get alertPrize() function
}
wheelData['animation'] = animation
function alertPrize()
{
createWheel()
// Call getIndicatedSegment() function to return pointer to the segment pointed to on wheel.
let winningSegment = winWheel.getIndicatedSegment();
// Basic alert of the segment text which is the prize name.
alert("You have won " + winningSegment.text + "!");
}
const startAnimation = () => {
winWheel = null
createWheel()
winWheel.startAnimation()
}
const createWheel = () => {
if (typeof window !== 'undefined' && winWheel == null) {
winWheel = new Winwheel(wheelData)
}
}
createWheel()
return (
<div>
<canvas id={canvasId} width={width} height={height} className='z-0'>
Canvas not supported
</canvas>
<button onClick={startAnimation} className='absolute w-full h-full top-0'></button>
</div>
)
}
有什么方法可以在callbackFinished上得到函数?
1条答案
按热度按时间aemubtdh1#
你需要将函数名作为
string
传递,而不是作为reference
传递,这里是固定代码。