反应：如何处理禁用 onclick 事件

Question

While mapping array, i want to check other elements' classlist in the array. Want to stop manipulate classlist if any button clicked before. Here is the code and issue photo

const questionElements = questions.map((question) => {

    // ANSWERS ARRAY AND SHUFFLE
    let answers = [...question.incorrect_answers,question.correct_answer]
    shuffle(answers)

    // TOGGLE BUTTON BACKGROUND COLOR WHEN BTN CLICKED
    function toggleBtnBgColor(btn) {
        btn.target.classList.toggle("dark-bg-color")
    }

    return (
        <div key={nanoid()}>
            <div className="question" key={nanoid()}>{question.question}</div>
            {answers.map((answer)=> {
                return (
                    <button key={nanoid()} onClick={toggleBtnBgColor} className="answer-button">{answer}</button>
                )
            })}
            <hr></hr>
        </div>
    )
})

return (
    <div className="question-container">
        {questionElements}
    </div>
)

Photo

Answer 1

Check please this codesandbox . It can be a little complicated for you but feel free to ask questions

We use useState as a store for keys and answers flags. When we update our store via setQuestions with each update we calculate answersDisabled and pass it through props in answer component.

Example isn't perfect but I hope it helps you

Answer 2

I am still confused about some part of my react code. I decided to seperate the data from api instead store questions in state. Then i plan to build question object and set questions and boolean flag for answer buttons. Recent issue is that when i get data from api, repeats itself 4 times. Let me show you code and console. Many thanks for help.

const [data, setData] = React.useState()
// FETCH QUIZ DATA FROM API
const fetchData = () => {
    fetch("https://opentdb.com/api.php?amount=5&type=multiple")
    .then((response) => response.json())
    .then((data) => setData(data.results))
}

console.log(data)

React.useEffect(()=> {
    fetchData()
},[])

Here is console photo <----

Answer 3

SOLVED. Seperated Question component from Quiz.js. Passed needed props to the components. Many thanks for all. Here is code

import React from "react"

import { nanoid } from "nanoid"

export default function Question(props) {

const [flag,setFlag] = React.useState(true)

// TOGGLE BUTTON BACKGROUND COLOR WHEN BTN CLICKED
function toggleBtnBgColor(btn) {
    if(flag) {
        btn.target.classList.toggle("dark-bg-color")
        setFlag(false)
    }
}

return (
    <>
        <div className="question" key={props.index}>{props.question}</div>
            {props.answers.map((answer,index)=> {
                return (
                    <button key={index} onClick={toggleBtnBgColor} className="answer-button">{answer}</button>
                )
        })}
        <hr></hr>
    </>
)

}

Here is Quiz.js

import React from "react"

import Question from "./Question"

export default function Quiz() {

const [data, setData] = React.useState([])

// FETCH QUIZ DATA FROM API
const fetchData = () => {
    fetch("https://opentdb.com/api.php?amount=5&type=multiple")
    .then((response) => response.json())
    .then((data) => setData(data.results))
}

React.useEffect(()=> {
    fetchData()
},[])

// SHUFFLE ALGORITHM TO USE LATER
function shuffle(array) {
    let currentIndex = array.length,  randomIndex;
  
    // While there remain elements to shuffle.
    while (currentIndex != 0) {
  
      // Pick a remaining element.
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
  
      // And swap it with the current element.
      [array[currentIndex], array[randomIndex]] = [
        array[randomIndex], array[currentIndex]];
    }
  
    return array;
}

const questionElements = data.map((question, index) => {
    // ANSWERS ARRAY AND SHUFFLE
    let answers = [...question.incorrect_answers,question.correct_answer]
    shuffle(answers)

    return (
        <Question key={index} index={index} question={question.question} answers={answers}/>
    )
})

return (
    <div className="question-container">
        {questionElements}
    </div>
)

}

Answer 4

I don't quite understand your issue. What you mean by stop manipulating classlist?