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) }