React - 如何訪問handleClick中的其他元素？

Question

我正在迭代一個數組，對於每個元素，我將它傳遞給一個handleClick function。 問題是，在那個 handleClick function 里面，我如何訪問元素的 rest？

const listOfAnswers = questions[questionNumber].possibleAnswers.map((obj, i, arr) => {
        return (
            <Button
                key={i}
                style={
                    {
                        margin: '15px 0',
                    }
                }
                variant='contained'
                onClick={e => handleClick(obj, e, arr)}
            >
                {obj.answer}
            </Button>
        )
    })

const handleClick = async (obj, e, arr) => {
        const { isCorrect, answer } = obj

        if (isCorrect) {
            setScore(score + 1)
            e.target.style.backgroundColor = 'green'
            await delay(100)
            e.target.style.backgroundColor = ''
        } else {
            e.target.style.backgroundColor = 'red'

            await delay(100)
            e.target.style.backgroundColor = ''
        }

        nextQuestion()

    }

我想做的是：當用戶點擊正確的答案時，該按鈕變為綠色。 這很容易實現。 當用戶點擊錯誤的答案時，它會變成紅色。 實現起來也很簡單。 但我想要的是：當用戶點擊錯誤的答案時，我希望正確的答案變成綠色。 為此，我認為我需要能夠訪問元素的 rest，因為在handleClick function 中，您只能訪問單個單獨的元素。

Answer 1

有多種方法可以做到：

1. 添加對 state 的answer （初始化為未定義）。 您的 handleClick 會將此 state 設置為用戶選擇的答案。 然后，如果定義了answer ，則以正確按鈕的樣式（在您的邊距旁邊）傳遞一個綠色背景顏色。 在obj.answer === answer的按鈕上，如果 obj.isCorrect 為 false，則設置紅色背景顏色。 （請注意，您需要在nextQuestion answer state 重置為未定義）
2. 將ref添加到正確答案按鈕（ https://reactjs.org/docs/refs-and-the-dom.html ），在 handleClick 上，您可以設置ref.current.style.background 。

更新與參考的例子

以下假設存在唯一的正確答案：

const correctAnswerRef = useRef(null);
const listOfAnswers = questions[questionNumber].possibleAnswers.map((obj, i, arr) => {
        return (
            <Button
                key={i}
                ref={obj.isCorrect ? correctAnswerRef : undefined}
                style={
                    {
                        margin: '15px 0',
                    }
                }
                variant='contained'
                onClick={e => handleClick(obj, e, arr)}
            >
                {obj.answer}
            </Button>
        )
    })

const handleClick = async (obj, e, arr) => {
        const { isCorrect, answer } = obj
        // always set current answer to green
        correctAnswerRef.current?.style.backgroundColor = 'green'
        if (isCorrect) {
            setScore(score + 1)
        } else {
            e.target.style.backgroundColor = 'red'
        }
        await delay(100)
        e.target.style.backgroundColor = '';
        correctAnswerRef.current?.style.backgroundColor;

        nextQuestion()

    }

Answer 2

 const [clicked, setClicked] = useState(-1); const listOfAnswers = questions[questionNumber].possibleAnswers.map((obj, i, arr) => { return ( <Button key={i} style={ { margin: '15px 0', color: clicked == -1? "#ffffff": clicked == i && obj.isCorrect? "#00ff00": cliked?= i: "#ffffff". "#ff0000" } } variant='contained' onClick={e => handleClick(i)} > {obj.answer} </Button> ) }) const handleClick = async (i) => { setClicked(i) nextQuestion() }

Answer 3

 const [clicked, setClicked] = useState(-1); const listOfAnswers = questions[questionNumber].possibleAnswers.map((obj, i, arr) => { return ( <Button key={i} style={ { margin: '15px 0', color: clicked == -1? "#ffffff": clicked == i && obj.isCorrect? "#00ff00": cliked?= i: "#ffffff". "#ff0000" } } variant='contained' onClick={handleClick} > {obj.answer} </Button> ) }) const handleClick = (e) => { setClicked(e.target.key) }