current position:Home>React project does salary guidance similar to the glory of the king - good practice of sin

React project does salary guidance similar to the glory of the king - good practice of sin

2022-02-04 17:32:42 Wu Di 98

Thank the content provider : Wu Jinniu software development studio

Introduction and final effect display :

As a novice, the author conducted a survey of three libraries , The final effect is only intro.js It works best , The effect is shown below :

React The final effect of novice guidance

One 、 Complete code :

react Code

import React, {
     useState } from "react";
import {
     Steps, Hints } from "intro.js-react";

import "intro.js/introjs.css";
import "./index.css";

export default function App() {
    
    const [stepsEnabled, setStepsEnabled] = useState(true);
    const [steps, setSteps] = useState([
        {
    
            element: ".user-name",
            intro: " enter one user name "
        },
        {
    
            element: ".password",
            intro: " Input password "
        },
        {
    
            element: ".test",
            intro: " Finally, click here to submit "
        },
        {
    
            element: ".next_page",
            intro: " Jump to the page "
        }
    ]);
    const [hintsEnabled, setHintsEnabled] = useState(true);
    const [hints, setHints] = useState([
        {
    
            element: ".user-name",
            hint: "Hello hint",
            hintPosition: "middle-right"
        }
    ]);

    function onExit() {
    
        setStepsEnabled(false);
    }

    function toggleSteps() {
    
        setStepsEnabled(!stepsEnabled)
    }

    function addStep() {
    
        const newStep = {
    
            element: ".test-add",
            intro: "Test step"
        };
        setSteps([...steps, newStep]);
    }

    function toggleHints() {
    
        setHintsEnabled(!hintsEnabled)
    }

    function addHint() {
    
        const newHint = {
    
            element: ".test",
            hint: "Test hint",
            hintPosition: "middle-right"
        };
        setHints([...hints, newHint]);
    }

    return (
        <div>
            <Steps
                enabled={
    stepsEnabled}
                steps={
    steps}
                initialStep={
    0}
                onExit={
    () => onExit()}
            />
            <Hints enabled={
    hintsEnabled} hints={
    hints} />

            <div className="controls">
                <div>
                    <button onClick={
    () => toggleSteps()}>Toggle Steps</button>
                    <button onClick={
    () => addStep()}>Add Step</button>
                </div>
                <div>
                    <button onClick={
    () => toggleHints()}>Toggle Hints</button>
                    <button onClick={
    () => addHint()}>Add Hint</button>
                </div>
            </div>

            <div style={
    {
     display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
                <div className="inputBox"> user name : <input className="user-name" type="text"/></div>
                <br/>
                <div className="inputBox"> The secret __ code : <input className="password" type="password"/></div>
                <hr />
                <button className="test"> Submit </button>
            </div>
        </div>
    );
}

css Code :

.controls {
    
  border-bottom: 1px solid black;
  padding: 10px;
  background-color: Gainsboro;
}

.controls > div {
    
  margin-bottom: 10px;
}

.controls > div:last-child {
    
  margin-bottom: 0px;
}

.controls button {
    
  outline: 0;
  cursor: pointer;
  width: 150px;
  height: 30px;
  font-size: .85rem;
  border: 1px solid RoyalBlue;
  background-color: LightSteelBlue;
  margin-right: 10px;
  font-weight: bold;
  border-radius: 3px;
}

.controls button:hover {
    
  color: Snow;
  background-color: RoyalBlue;
}

.inputBox {
    
  width: 50%;
}
.inputBox input {
    
  width: 80%;
}
button {
    
  width: 50%;
}

Two 、 Code parsing :

1. First of all, we need to install the package first :

npm install intro.js intro.js-react -S
// or
cnpm install intro.js intro.js-react -S
// or
yarn add intro.js intro.js-react -S

2. After installing the package, an introduction is required :

import React, {
     useEffect, useState } from "react";
import {
     Steps, Hints } from "intro.js-react"; //  Introduce the components we need 

import "intro.js/introjs.css"; //  introduce  introjs  The style of 
import "./index.css"; //  Introduce our own style 

3. Then we initialize four states

//  Controls whether novice guidance is turned on 
const [stepsEnabled, setStepsEnabled] = useState(true);
//  What are the steps , The element that the corresponding step should point to and the text that should be displayed 
const [steps, setSteps] = useState([
    {
    
        element: ".user-name",
        intro: " enter one user name "
    },
    {
    
        element: ".password",
        intro: " Input password "
    },
    {
    
        element: ".test",
        intro: " Finally, click here to submit "
    },
    {
    
        element: ".next_page",
        intro: " Jump to the page "
    }
]);
//  Whether to open the prompt 
const [hintsEnabled, setHintsEnabled] = useState(true);
//  Set what needs to be prompted 
const [hints, setHints] = useState([
    {
    
        element: ".user-name",
        hint: "Hello hint",
        hintPosition: "middle-right"
    }
]);

4. Novice guidance pop-up effect :

 Insert picture description here

The effect of novice tips :

 Insert picture description here
 Insert picture description here

5. Control state

//  Turn off the step 
function onExit() {
    
    setStepsEnabled(false);
}
//  Set whether to start boot 
function toggleSteps() {
    
    setStepsEnabled(!stepsEnabled)
}
//  Add boot deployment 
function addStep() {
    
    const newStep = {
    
        element: ".test-add", //  This should be dynamic 
        intro: "Test step" //  This should be dynamic 
    };
    setSteps([...steps, newStep]);
}
//  Controls whether to prompt 
function toggleHints() {
    
    setHintsEnabled(!hintsEnabled)
}
//  Add hints 
function addHint() {
    
    const newHint = {
    
        element: ".test", //  This should be dynamic 
        hint: "Test hint", //  This should be dynamic 
        hintPosition: "middle-right" //  This should be dynamic 
    };
    setHints([...hints, newHint]);
}

6. return A component

<div>
   <Steps
       enabled={stepsEnabled}
       steps={steps}
       initialStep={0}
       onExit={() => onExit()}
   />
   <Hints enabled={hintsEnabled} hints={hints} />

   <div className="controls">
       <div>
           <button onClick={() => toggleSteps()}>Toggle Steps</button>
           <button onClick={() => addStep()}>Add Step</button>
       </div>
       <div>
           <button onClick={() => toggleHints()}>Toggle Hints</button>
           <button onClick={() => addHint()}>Add Hint</button>
       </div>
   </div>

   <div style={
     {
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
       <div className="inputBox"> user name : <input className="user-name" type="text"/></div>
       <br/>
       <div className="inputBox"> The secret __ code : <input className="password" type="password"/></div>
       <hr />
       <button className="test"> Submit </button>
   </div>
</div>

3、 ... and 、 Expand functions :

1. Don't close the boot pop-up window when clicking on the screen

useEffect(() => {
    
	//  find  modal  Element resets its click event 
    document.querySelector('.introjs-overlay').onclick = () => {
    }
}, []);

2. Do something extra when clicking on each step 【 For example, click to the last step to jump to the page 】

//  First, set one more step when setting the steps , So that when you click to the last step, it can appear  next  Button 
<Steps
    enabled={
    stepsEnabled}
    steps={
    steps}
    initialStep={
    0}
    onChange={
    (nextStepIndex, nextElement) => {
    
        //  Here you can use the next element , Or the next step index Do some custom actions 
        if (nextStepIndex === 1) {
    
            // window.location.href = 'http://baidu.com';
        }
    }}
    onExit={
    () => onExit()}
/>

Four 、 At the end of the article, the author left a message :

If friends have any custom needs, you can comment and leave a message , Let's study together ~

copyright notice
author[Wu Di 98],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/02/202202041732410991.html

Random recommended