如何从另一个组件的onclick事件触发功能

Question

So I'm new in ReactJS and there's a cool company offering a junior react developer position if I solve their test project correctly. In the project, I have to draw four svg components and handle some simple events with only one user interaction which is a button click event. So everything seems quite simple but the thing is, I'm stucked in the middle of the project.

I want to give a shake animation to one of the components with a click event in the button component. When Button is clicked, the Tree should shake for 3 seconds and one other action will be triggered after that. I prepared a css animation and I want to change the class of the Tree component every time when the Button component clicked. Could not find out how to do so.

So here is my button component

class ShakeButton extends React.Component {
    this.props.onClick(this.props.activeClass==='shake')

    render() {
        return (
            <g id="shakeButton" transform="scale(0.15,0.15), translate(3000,-1000)"  onClick={this.handleClick}>
                //a good amount of svg content here
            </g>
        )
    }
}

export default ShakeButton

and here my Tree component (which is gonna change its class name for css animation)

import React, { Components } from "react";
import  "./cssTree.css";

class AppleTree extends React.Component{
//   state = {
//     activeClass: ''
//   } n
// handleClick = () => this.props.onClick(this.props.activeClass==='shake')

  render() {
    return (
      <g className="" id="appleTree" >
        <g transform="translate(-1000 -1300) scale(1.5)">
         //again, some crowded svg content here
        </g>
      </g>
    )
  }
}

export default AppleTree

I collect all of my components in a component named <Canvas /> and render it inside the App.js

Answer 1

You could try lift the onClick method and state up , meaning get it in your parent component ( App I suppose), then pass it down to child components.

class App extends React.Component{  
  constructor(props) {
    super(props);
    this.state({
      className: ''
    });
  }
  handleClick = () => {
    this.setState({ className: 'shake' });
  }

  render (
    return (
    // all your components
    <Button clickHandler={this.handleClick} />
    <AppleTree class={this.state.className} />
    )
  )
}

// Button component: Stateless if it doesn't need it's own state
const Button = ({ clickHandler }) => {
 return (
   <g id="shakeButton" transform="scale(0.15,0.15), translate(3000,-1000)"  onClick={() => clickHandler()}>
   //a good amount of svg content here
   </g>
 )
}

// Stateless if it doesn't need its own state
const AppleTree = ({ class }) => {
    return (
      <g className={class} id="appleTree" >
        <g transform="translate(-1000 -1300) scale(1.5)">
         //again, some crowded svg content here
        </g>
      </g>
    )
}