javascript - React-spring - 动画 div 移除 onclick 功能
问题描述
我在元素onClick
上的功能遇到问题。如果没有 React-spring 动画,它可以完美运行。但是由于我已经向它添加了动画,所以功能不起作用。控制台没有错误,我在谷歌上真的找不到这样的问题。你遇到过这种类型的问题吗?
声明动画
import {useTransition, animated} from 'react-spring';
const gameOptionsTransitions = useTransition(showGameOptions, null, {
from: { opacity: 0, transform:'translateY(200px)' },
enter: { opacity: 1, transform:'translateY(0)' },
leave: { opacity: 0, transform:'translateY(200px)'}
});
作为回报
{gameOptionsTransitions.map(({ item, key, props }) =>
item &&
<animated.div key={key} style={props}>
<Link to="/play">
<a className="playerVsComputer-btn" onClick={props.playPlayerVsComputer}>Player vs. Computer</a>
</Link>
<Link to="/play">
<a className="playerVsComputer-btn" onClick={props.playPlayerVsPlayer}>Player vs. Player</a>
</Link>
<form onSubmit={handleSubmit}>
<input type="text" ref={sizeOfBoard} onChange={removeHighlightInput} autoFocus />
</form>
</animated.div>
)};
如您所见,两个a元素都包含在Link元素中。因此,单击后,您将被重定向到该路径,但也应触发函数。此函数作为道具从 App.js 发送到此组件。我试图将整个元素onClick={props.playPlayerVsComputer}
从元素移动到链接,但没有任何变化。
发送功能
function playPlayerVsPlayer(){
setPlayerVsPlayer({
AI:false,
AImove:false
});
setDimensions({
rows:"3",
columns:"3"
})
generateMatrix(3,3);
}
该函数设置维度状态,然后根据这些维度创建矩阵。然后generateMatrix函数触发另一个函数,该函数将行 x 列表呈现给 App。但这并不重要,因为动画 div 会有问题,而不是这些函数。
解决方案
我已经像这样更改了动画 div,因此Link元素内部没有任何其他元素,classNames也移动到了Link元素。
{gameOptionsTransitions.map(({ item, key, props }) =>
item &&
<animated.div key={key} style={props}>
<Link to="/play" className="setGameMode-btn" onClick={playPlayerVsComputer}>
Player vs. Computer
</Link>
<Link to="/play" className="setGameMode-btn" onClick={playPlayerVsPlayer}>
Player vs. Player
</Link>
<form onSubmit={handleSubmit}>
<input type="text" ref={sizeOfBoard} onChange={removeHighlightInput} autoFocus />
</form>
</animated.div>
)};
对于 onClick 事件,我创建了两个新函数,它们从 App.js 调用这些函数作为道具。
//Fire animations sent as a props
function playPlayerVsComputer(){
props.playPlayerVsComputer();
}
function playPlayerVsPlayer(){
props.playPlayerVsPlayer();
}
推荐阅读
- java - 如何使用 Micronaut 客户端注释映射 errorType
- reactjs - 来自 GraphQL 突变的动态响应
- go - 如何使 golang 不会将供应商导入与绝对导入混淆?
- php - 尽管函数运行成功,但 Swift 中的 API 函数调用返回无效的 JSON 响应
- python - TypeError:IntegrityError 类型的对象不是 JSON 可序列化的
- reactjs - 如何更改 ag-grid 日期过滤器占位符格式
- java - 为什么我们将 Kotlin 类称为 Java 类?
- react-native - 反应原生:未定义不是一个对象(评估'this.props.navigation.navigate')
- ios - 如何将黑色区域添加到 UIImage ios
- android - 哪些插件要取消选中,哪些插件要在 android studio 中检查以进行颤振开发