React - 如何访问handleClick中的其他元素？答案

【问题标题】：React - how to access other elements in handleClick?React - 如何访问handleClick中的其他元素？
【发布时间】：2022-09-27 16:39:20
【问题描述】：

我正在迭代一个数组，对于每个元素，我将它传递给一个 handleClick 函数。问题是，在那个handleClick函数里面，如何访问其余元素？

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

    }

我想做的是：当用户点击正确的答案时，该按钮变为绿色。这很容易实现。当用户点击错误的答案时，它会变成红色。实现起来也很简单。但我想要的是：当用户点击错误的答案时，我希望正确的答案变成绿色。为此，我认为我需要能够访问其余元素，因为在 handleClick 函数中，您只能访问单个单独的元素。

标签： javascript reactjs

【解决方案1】：

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

【讨论】：

你使用功能组件还是类组件？
我试过这个，但还是不行。我使用功能组件
它是如何工作的？

【解决方案2】：

有多种方法可以做到：

将answer 添加到状态（初始化为未定义）。您的 handleClick 会将此状态设置为用户选择的答案。然后，如果定义了answer，则以正确按钮的样式（在您的边距旁边）传递一个绿色背景颜色。在obj.answer === answer 的按钮上，如果obj.isCorrect 为false，则设置红色背景颜色。（请注意，您需要在您的nextQuestion 中将answer 状态重置为未定义）

在正确答案按钮（https://reactjs.org/docs/refs-and-the-dom.html）中添加ref，并在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()

    }

【讨论】：

我确实觉得使用ref 是最好的方法，但我不太了解如何使用ref
@5ecured 以如何使用 ref 的示例更新了答案。但在我看来，基于状态方法的样式/类在 React 中比手动修改事件的样式属性更标准
我尝试实施您的解决方案，但它仍然无法正常工作。不过，我很感谢你的帮助

【解决方案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)
}

【讨论】：