1

我正在NanoButton从我的页面调用自定义组件以及onClick路由到另一个页面的指令：

// Page.js
import { Component } from 'react';
import Router from 'next/router';
class Page2 extends Component {
  render() {
    return(
      <NanoButton type="button" color="success" size="lg" onClick={() => Router.push('/about')}>About</NanoButton>
    )
  }
}

单击按钮（组件）时，我想在继续作为道具进入NanoButton之前执行一些内部代码。onClick通过这个内部代码，我试图模拟持续 600 毫秒的材料设计涟漪效应。我就是这样做的：

import { Component } from 'react';
import { Button } from 'reactstrap';

class NanoButton extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  onClick(e) {
    this.makeRipple(e);
    this.props.onClick();
  }
  makeRipple(e) {
    const elements = e.target.getElementsByTagName('div');
    while (elements[0]) elements[0].parentNode.removeChild(elements[0]);
    const circle = document.createElement('div');
    e.target.appendChild(circle);
    const d = Math.max(e.target.clientWidth, e.target.clientHeight);
    circle.style.width = `${d}px`;
    circle.style.height = `${d}px`;
    const rect = e.target.getBoundingClientRect();
    circle.style.left = `${e.clientX - rect.left - (d / 2)}px`;
    circle.style.top = `${e.clientY - rect.top - (d / 2)}px`;
    circle.classList.add('ripple');
  }
  render() {
    return (
      <Button
        className={this.props.className}
        type={this.props.type}
        color={this.props.color}
        size={this.props.size}
        onClick={this.onClick}
      >
        {this.props.children}
      </Button>
    );
  }
}

export default NanoButton;

如您所见，我需要该makeRipple方法在之前执行this.props.onClick。最初，它似乎并没有这样做。然而，经过进一步的测试，事实证明这些方法确实以正确的顺序运行，除了路由（如 中编码this.props.onClick）立即发生并且样式为持续 600 毫秒的波纹动画没有机会运行。使这个动画发生的 CSS 是：

button {
    overflow: hidden;
    position: relative;
}

button .ripple {
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    transform: scale(0);
    animation: ripple 0.6s linear;
}

@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

如何this.props.onClick仅在动画完成后才运行？我尝试像这样设置超时：

setTimeout(this.props.onClick(), 600);

但这会引发错误。

注意：我使用NextJS进行服务器端渲染，如果这有什么不同的话。

4

1 回答 1

2

有很多方法可以做到这一点，比如Promise,async/await等。但如果你尝试setTimeout请使用

setTimeout(() => this.props.onClick(), 600);

或者

setTimeout(this.props.onClick, 600);

你的情况：

setTimeout(this.props.onClick(), 600);

将不起作用，因为此行会将结果传递给this.props.onClick()第一个参数，而不是传递整个函数。

于 2017-08-18T01:24:39.270 回答