插播一条react.js

/*********************************************js部分start****************************************************/

import React, { Component } from 'react';
import './button.css';

export default class Button extends Component {
constructor(props) {
super(props);
this.state = {
active: false,
deltaX: 0,
deltaY: 0,
};
this.myRef = React.createRef();
}
render() {
return (

{this.props.value}
{this.state.active === true ? (
className="circle"
onAnimationEnd={this.y.bind(this)}
style={{ left: this.state.deltaX, top: this.state.deltaY }}
/>
) : (
''
)}

);
}
x(zzz) {
let { x, y } = this.myRef.current.getBoundingClientRect();
let { clientX, clientY } = zzz;
let deltaX = clientX - x - 5;
let deltaY = clientY - y - 5;
this.setState({
active: true,
deltaX: deltaX,
deltaY: deltaY,
});
console.log('里面的函数');
this.props.onClick.call(null, 'frank')
this.props.onClick && this.props.onClick.call(null, zzz);
}
y() {
this.setState({
active: false,
});
}
}

/*********************************************js部分end****************************************************/
/*********************************************css部分start*************************************************/
.button2 {
box-sizing: border-box;
height: 32px;
background: #ffffff;
border: 1px solid rgba(153, 153, 153, 1);
border-radius: 4px;
padding: 4px 1em;
margin: 10px;
position: relative;
overflow: hidden;
}
.button2:focus {
outline: none;
border-color: black;
}
.button2 > .circle {
border-radius: 50%;
height: 10px;
width: 10px;
background: red;
opacity: 0.5;
display: inline-block;
animation: 1s big forwards;
position: absolute;
z-index: 0;
}
.button2 > .value {
position: relative;
z-index: 1;
}

@keyframes big {
0% {
transform: scale(0.1);
}
100% {
transform: scale(10);
}
}
/***********************************************css部分end****************************************/