React：如何禁用onClick事件？遍历数组时限制按钮类名修改

我在React开发中，通过map遍历数组生成题目及选项按钮，点击按钮会切换其dark-bg-color类名。需求是：一旦有任意按钮被点击过，就停止修改所有按钮的classList，禁用后续onClick事件的样式操作。

原有代码 #

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

解决方案 #

React中不推荐直接操作DOM元素的classList，建议通过状态管理实现需求，以下是优化后的实现：

核心思路

1. 用状态isAnswered标记是否已有按钮被点击
2. 点击按钮时先判断isAnswered，若为true则直接返回，不执行样式修改
3. 首次点击时更新状态，同时通过状态控制按钮样式，替代DOM操作

修改后的完整代码

import { useState } from 'react';
import nanoid from 'nanoid';

// 假设你的shuffle函数已定义
function shuffle(array) {
  // 你的数组洗牌逻辑
}

function QuestionSection({ questions }) {
  // 标记是否已有答案被选中
  const [isAnswered, setIsAnswered] = useState(false);
  // 记录选中的答案，用于控制样式
  const [selectedAnswer, setSelectedAnswer] = useState(null);

  const questionElements = questions.map((question) => {
    let answers = [...question.incorrect_answers, question.correct_answer];
    shuffle(answers);

    const handleButtonClick = (answer) => {
      // 若已有答案被选，直接终止操作
      if (isAnswered) return;
      // 标记已完成选择
      setIsAnswered(true);
      // 记录当前选中的答案
      setSelectedAnswer(answer);
    };

    return (
      <div key={nanoid()}>
        <div className="question">{question.question}</div>
        {answers.map((answer) => (
          <button
            key={nanoid()}
            onClick={() => handleButtonClick(answer)}
            className={`answer-button ${selectedAnswer === answer ? 'dark-bg-color' : ''}`}
            // 可选：直接禁用按钮，强化不可点击的视觉反馈
            disabled={isAnswered}
          >
            {answer}
          </button>
        ))}
        <hr />
      </div>
    );
  });

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

export default QuestionSection;

关键优化点

• 状态驱动UI：用selectedAnswer控制按钮的dark-bg-color类名，完全遵循React的状态更新逻辑，避免直接操作DOM
• 点击拦截：通过isAnswered状态拦截后续点击操作，符合需求要求
• 用户体验优化：可选添加disabled={isAnswered}，让按钮在不可点击时呈现禁用状态，更直观

内容的提问来源于stack exchange，提问作者Emre YAZICI