React-spring

Question

我在 a 元素上的 onClick 函数遇到问题。如果没有 React-spring 动画，它可以完美运行。但是因为我已经给它添加了动画，所以功能不起作用。控制台没有错误，我在 google 上真的找不到任何类似的问题。你遇到过这种问题吗？

声明动画

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)'}
});

在return

{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} 从 a 元素移动到 Link 但没有任何变化。

发送功能

  function playPlayerVsPlayer(){
    setPlayerVsPlayer({
      AI:false,
      AImove:false
    });

    setDimensions({
      rows:"3",
      columns:"3"
    })

    generateMatrix(3,3);
  }

此函数设置维度状态，然后根据这些维度创建矩阵。然后 generateMatrix 函数触发另一个函数，它将行 x 列 table 渲染到 App。但这并不重要，因为动画 div 会有问题，这些功能不会。

Answer 1

您正在添加一个 React spring 转换，它有自己的 props ,

您只需将 props => 重命名为其他名称（例如 annimationProps ），以免混淆 App 文件传递给组件的道具

如下：

{gameOptionsTransitions.map(({ item, key, annimationProps }) =>
      item && 
          <animated.div key={key} style={annimationProps}>
              <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>
)};

Answer 2

我已经像这样更改了动画 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();
}

React-spring - 动画 div 删除了 onclick 函数

React-spring - Animated div removes onclick function

javascript

reactjs

react-props