Question

我想将legitRipple.js添加到自定义的React Button点击事件中。链接到legitRipple JS：https://matthias-vogt.github.io/legitRipple.js/

这是我的草稿，但它不起作用 - 我不知道如何链接click事件和对.ripple（）事件的引用

Button = class Button extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = {

    };
  }
  componentDidMount() {
    //need to add JQuery function - on button click, I need to register an event? or somehow call (ref=buttonEl) $(buttonEl).ripple();

  }

//do I need an componentWillUnmount as well?

  onClick(ev) {
    let onClickFn = this.props.onClick;
    onClickFn && onClickFn(ev);
   //somehow register an event to show the ripple? 
  }
  render() {
    return (
      <div>
        <button type="button" ref="buttonEl" className={this.props.className} onClick={this.onClick.bind(this)}>
          {this.props.children}
        </button>
      </div>
    );
  }
}

Answer 1

您可以使用this.refs.buttonEl访问您的按钮元素，这样您就可以执行$(this.refs.buttonEl).ripple()在该元素上安装涟漪处理程序。

从文档中看，单击时元素应自动波动。看起来你不得不在onClick期间调用任何东西来实现这一点。

您可能希望在$(this.refs.buttonEl).ripple({unbind: true});中执行componentWillUnmount。您可能还需要在componentWillUpdate期间删除事件处理程序，并在componentDidUpdate期间附加它。

React Custom Component - Button - 在OnClick事件上调用JQuery插件

1 个答案: