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

我的

onClick

函数在a元素上遇到问题。如果没有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>
  )};

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

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

    generateMatrix(3,3);
  }

作为回报

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

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

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

    generateMatrix(3,3);
  }

---

此函数用于设置维度状态，然后根据这些维度创建矩阵。然后，generateMatrix函数触发另一个函数，将行x列表呈现给应用程序。但这并不重要，因为动画div会出现问题，而不是这些功能。

您正在添加一个react spring过渡，它有自己的

道具

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

详情如下:

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

{gameoptions transitions.map（{item，key，annimationProps}）=>
项目&&
玩家对电脑
玩家对玩家
)};
我像这样更改了动画div，因此Link元素中没有任何其他元素，同时类名移动到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>
)};

谢谢你的回答！您的方法确实修复了该功能，现在它按预期工作，但现在动画不工作。。我用这种方法解决了这个问题。检查答案我现在已经发布了，你有在路线之间转换的经验吗@SpringerF@Pinncik不，不是真的对不起