गिनती = 0 होने पर मैं पिछला बटन अक्षम करना चाहता हूं; जो डिफ़ॉल्ट रूप से होता है जब गिनती असाइन की जाती है तो मैंने अक्षम एटीआर का उपयोग करने का प्रयास किया और फिर अगर स्थिति का उपयोग करके इसे हटा दिया लेकिन डिफ़ॉल्ट रूप से अक्षम नहीं किया जा रहा है।

import React, { useState } from 'react';
import $ from 'jquery';
// let count = 0;
function Slides({slides}) {

    let [count, setCount] = useState(0);

    // let [isDisabled, setisDisabled] = useState(false);
    
    

    if(count >= (slides.length - 1)){
        $('.nextButton').attr("disabled", true);
    } else {
        $('.nextButton').attr("disabled", false);
    }

    if(count <= 0){
        $('.prevButton').attr("disabled", true);
    } else {
        $('.prevButton').attr("disabled", false);
    }

    if(count < 1){
        $('.prevButton').attr("disabled", true);
    }

   

    return (
        <div>
            <div id="navigation" className="text-center">
                <button data-testid="button-restart" onClick={() => setCount(count = 0)} className="small outlined">Restart</button>
                <button data-testid="button-prev"  onClick={() => setCount(count - 1)} className="small prevButton">Prev</button>
                <button data-testid="button-next"   onClick={() => setCount(count + 1)}  className="small nextButton">Next</button>
            </div>
            <div id="slide" className="card text-center">
                <h1 data-testid="title">{slides[count].title}</h1>
                <p data-testid="text">{slides[count].text}</p>
            </div>
        </div>
    );

}

export default Slides;
-1
Natnael S 2 नवम्बर 2020, 20:35

1 उत्तर

सबसे बढ़िया उत्तर

आपको यहां jQuery का उपयोग करने की आवश्यकता नहीं है। अक्षम स्थिति को ट्रैक करने के लिए एक और स्थिति बनाएं और विशेषता सेट करने के लिए टेम्पलेट में उसका उपयोग करें।

disabled={isDisabled}

सभी शर्तों को useEffect पर ले जाएं और count को डिपेंडेंसी के रूप में दें।

import React, { useEffect, useState } from 'react';

// let count = 0;
function Slides({slides}) {

    const [count, setCount] = useState(0);
    const [isDisabled, setisDisabled] = useState(true);

    useEffect(()=> {
        if(count >= (slides.length - 1)){
            setisDisabled(true);
        } else {
            setisDisabled(false);
        }

        if(count <= 0){
            setisDisabled(true);
        } else {
            setisDisabled(false);
        }
    
        if(count < 1){
            setisDisabled(true);
        }

    }, [count]);

    return (
        <div>
            <div id="navigation" className="text-center">
                <button data-testid="button-restart" onClick={() => setCount(0)} className="small outlined">Restart</button>
                <button data-testid="button-prev"  onClick={() => setCount(count - 1)} className="small prevButton" disabled={isDisabled}>Prev</button>
                <button data-testid="button-next"   onClick={() => setCount(count + 1)}  className="small nextButton">Next</button>
            </div>
            {<div id="slide" className="card text-center">
                <h1 data-testid="title">{slides[count].title}</h1>
                <p data-testid="text">{slides[count].text}</p>
            </div>}
        </div>
    );

}

export default Slides;
0
Sarun UK 2 नवम्बर 2020, 18:03