The final effect of the implementation

As usual, first look at the final effect to achieve (double click on the heart)

Implementation steps

Realize the principle of

Double click, as the name suggests, is the time interval between the first click and the second click is less than a fixed value

GetTime () is used to get the timestamp, compare the previous and previous timestamps, and render a red heart if the value is less than a certain value.

So how do you render the hearts?

To render the node, select the reactdom. render method.

And now there is a problem, it is apply colours to a drawing is completed also need to remove this node, the React and provide a ReactDOM unmountComponentAtNode this method, using this method to remove effects of hearts of nodes.

The basic concept

Now review these two methods:

ReactDOM.render

This method I believe you should be quite familiar with.

Syntax: reactdom.render (Element, container[, callback)

Render a React element in a supplied container and return a reference to it (or null for stateless components).

The React component is rendered into the specified Container.

ReactDOM.unmountComponentAtNode

Grammar: ReactDOM unmountComponentAtNode (container)

Removing a component from the DOM removes its Event handlers and state. This function does nothing if there are no corresponding mounted components on the specified container.

Simply put: Remove all components from a specified component.

To prepare

First, the custom style block in the implementation (because of the use of the gravitation-Components library)

You just need to know what it does, right

Main is just for good presentation (center the component to display)

export const Main = styled.main` height: 100vh; display: flex; flex-direction: column; align-items: center; `;
Copy the code

This Photo is the component in Main, which shows an image that will display the red heart effect on this component

export const Photo = styled.div` height: 440px; width: 300px; background: url("https://avatars.githubusercontent.com/u/54023155?v=4") no-repeat center center/cover; margin: auto; cursor: pointer; max-width: 100%; position: relative; Box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); overflow: hidden; `;
Copy the code

The following HeartDiv component displays the red heart effect. It uses the ANIMATION property of CSS to make the red heart bigger and transparent. The code is as follows:

const grow = keyframes` to { transform: translate(-50%, -50%) scale(10); opacity: 0; } `;

export const HeartDiv = styled.div` position: absolute; color: red; /* This will get the position of the mouse click when rendering and display the hearts in this position */ top:${(props) => props.y}px;
  left: ${(props) => props.x}px;
  animation: ${grow}0.6 s linear; transform: translate(-50%, -50%) scale(0); `;
Copy the code

implementation

Now start implementing the heart effect

First remove the display of the hearts component, because it will be rendered and then removed

import React from "react";
import { HeartDiv } from "./styled";

function Heart(props) {
  return (
    // Receive the position of the mouse click received from the parent component
    <HeartDiv x={props.x} y={props.y}>
      ❤
    </HeartDiv>
  );
}

export default Heart;
Copy the code

To see whether the two clicks are less than a fixed value, the function is implemented as follows:

let clickTime = 0;

const handleClick = (e) = > {
    if(clickTime === 0) {
        // If it is the first click, get the current timestamp and save it
        clickTime = new Date().getTime();
    } else {
        if((new Date().getTime() - clickTime) < 800) { // Two clicks less than a certain value, in this case 800
            // Implement it
            clickTime = 0; // Set it to 0 and go through the steps again
        } else {
            // If it exceeds 800, you need to retrieve the current timestamp
            clickTime = new Date().getTime(); }}}Copy the code

That makes a lot of sense

But the point is how does the parent render the component and then remove it

The next step is to implement this function based on this function

Here’s a picture to illustrate. The
and were introduced in the preparation stage, so if you forget, scroll through it

The complete code is as follows (the code in the image above) :

import React from "react";
import ReactDOM from "react-dom";
import Heart from "./Heart";
import { Main, Photo } from "./styled";

let clickTime = 0;

function DoubleClickHeart() {

  const handleClick = (e) = > {
    if(clickTime === 0) {
      clickTime = new Date().getTime();
    } else {
      if((new Date().getTime() - clickTime) < 800) {
      
        // ** implements **
        // The following two values are ** in the component ** double click and get the mouse click position
        const xInside = e.clientX - e.target.offsetLeft;
        const yInside = e.clientY - e.target.offsetTop;
        // Here is the render component
        
      
        ReactDOM.render(
          <Heart x={xInside} y={yInside} />.document.getElementById("container")); clickTime =0;
        // Remove this component after 1000ms
        setTimeout(() = > {
          ReactDOM.unmountComponentAtNode(document.getElementById("container"));
        }, 1000)}else {
        clickTime = new Date().getTime(); }}}return (
    <Main>
      <h3>Double click on the image to ❤ it</h3>

      <Photo onClick={handleClick} id="container" />
    </Main>
  );
}

export default DoubleClickHeart;
Copy the code

Now you have double – clicked hearts.

The last

This blog is more ReactDOM are introduced. The render and ReactDOM unmountComponentAtNode of these two methods, there may be a better method, can comment to introduce (ha ha)

The full source code for this blog is here

I implemented all of the 50 Projects in 50 Days examples using React Hooks.

Github addresses: 50-mini-projects-with-react

Comments are welcome if any are inappropriate