Блог

Главная - Вопросы по программированию - Панель прогресса реакции

Панель прогресса реакции

#javascript #reactjs

#javascript #reactjs

Вопрос:

Здравствуйте, мне нужно настроить индикатор выполнения. Итак, когда я нажимаю на кнопку, отображается индикатор выполнения, кнопка и содержимое внутри нее исчезают, индикатор прогресса начинает переходить на 0 100, а также показывает некоторый текст выше, и когда он достигает 100%, индикатор выполнения исчезает, а текст выше, но после этого появляется новый текст. Заранее спасибо

 
import React,{useEffect, useState} from 'react'
import LinearProgress from '@material-ui/core/LinearProgress'
const useStyles = makeStyles({
  root: {
    width: '100%',
  },
});

const Content =(props)=> {
const classes = useStyles();
const[hideContent, setHideContent]= React.useState(false) 
const [progress, setProgress] = React.useState(10);


function handleClick12 ()
{setHideEset(true) } 


useEffect(() => {
  const timer = setInterval(() => {
    setProgress((prevProgress) => (prevProgress >= 100 ? 10 : prevProgress   10));
  }, 800);
  return () => {
    clearInterval(timer);
  };
}, []);

    return (
             {!hideContent amp;amp;   
              <div className='esetNod__info'>         
              <h3>Hello</h3>             
              <Button onClick={handleClick12} className='fix__button'variant='outlined'></Button>
              <div >
              <LinearProgress value={progress} />
              </div>
              </div>
                 } 
              
           
       </div>
                      
    
    )
}

export default Content;

Комментарии:

1. Вам еще предстоит немало поработать над этим. Однако используете ли вы VS Code? Вы могли бы действительно извлечь выгоду из linting… найдите расширение eslint в VS Code. Еще один хороший вариант — Prettier. Когда я вставил ваш код в свой редактор, он загорелся, как рождественская елка с ошибками.

2. @TonyDrummond У меня оба установлены xd

3. @TonyDrummond. Причина, по которой он загорелся, как рождественская елка, ошибка заключалась в том, что я не ввел никакого импорта в этот вопрос

4. не могли бы вы перефразировать то, что вы пытаетесь выполнить здесь? это немного загадочно

5. индикатор выполнения, который загружается до 0 100%, а после достижения 100% он исчезает и показывает некоторый текст

Ответ №1:

Я пытался написать что-нибудь для вас:

 import React, { useState } from "react";
import LinearProgress from "@material-ui/core/LinearProgress";

const Content = () => {
    const [isLoading, setIsLoading] = useState(false);
    const [hasLoaded, setHasLoaded] = useState(false);
    const [progress, setProgress] = useState(0);

    const handleClick = () => {
        setIsLoading(true);
        const interval = setInterval(() => {
            setProgress((prevProgress) => {
                const next = prevProgress   10;
                if (next === 100) {
                    clearInterval(interval);
                    setIsLoading(false);
                    setHasLoaded(true);
                }
                return next;
            });
        }, 800);
    };

    if (!isLoading amp;amp; !hasLoaded) {
        return (
            <div className="esetNod__info">
                <h3>Pre load content</h3>
                <button onClick={handleClick} className="fix__button">
                    Load Content
                </button>
            </div>
        );
    } else if (isLoading amp;amp; !hasLoaded) {
        return (
            <diV>
                <h3>Loading content</h3>
                <LinearProgress value={progress} />
            </diV>
        );
    } else {
        return (
            <div>
                <h3>Post load content</h3>
            </div>
        );
    }
};

export default Content;