React实现点击检查答案按钮切换对应Div样式的方案

核心思路是用React的状态来控制元素样式：点击按钮时判断答案对错，更新状态，再根据状态给目标div应用不同的样式类。下面是具体实现步骤：

步骤1：添加状态管理 #

用useState钩子定义状态变量，记录答案的校验结果（未检查/正确/错误）：

import { useState } from 'react';

function App() {
  // 初始为null，表示还未检查答案
  const [answerStatus, setAnswerStatus] = useState(null);
  // 存储用户输入的答案（根据你的实际场景调整）
  const [userAnswer, setUserAnswer] = useState('');
  
  // ...其他代码
}

步骤2：编写检查答案的逻辑 #

写点击事件处理函数，对比用户答案与正确答案，更新状态：

const handleCheckAnswer = () => {
  // 替换成你的正确答案判断逻辑
  const correctAnswer = 'React';
  if (userAnswer.trim() === correctAnswer) {
    setAnswerStatus('correct');
  } else {
    setAnswerStatus('wrong');
  }
};

步骤3：给目标div绑定动态样式 #

通过className结合状态值，动态切换样式类：

<div className={`answer-box ${answerStatus === 'correct' ? 'correct' : answerStatus === 'wrong' ? 'wrong' : ''}`}>
  <input 
    type="text" 
    value={userAnswer}
    onChange={(e) => setUserAnswer(e.target.value)}
    placeholder="输入答案"
  />
</div>

<button onClick={handleCheckAnswer}>检查答案</button>

步骤4：添加CSS样式 #

在样式文件里定义正确/错误状态对应的样式：

.answer-box {
  padding: 12px;
  border: 1px solid #eee;
  margin: 15px 0;
  border-radius: 4px;
}

.correct {
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.wrong {
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

完整示例代码 #

整合后你的App.js代码如下：

import { useState } from 'react';
import './App.css';

function App() {
  const [answerStatus, setAnswerStatus] = useState(null);
  const [userAnswer, setUserAnswer] = useState('');

  const handleCheckAnswer = () => {
    const correctAnswer = 'React';
    if (userAnswer.trim() === correctAnswer) {
      setAnswerStatus('correct');
    } else {
      setAnswerStatus('wrong');
    }
  };

  // 可选：添加重置功能
  const handleReset = () => {
    setAnswerStatus(null);
    setUserAnswer('');
  };

  return (
    <div className="App">
      <h2>答题测试</h2>
      <div className={`answer-box ${answerStatus === 'correct' ? 'correct' : answerStatus === 'wrong' ? 'wrong' : ''}`}>
        <input
          type="text"
          value={userAnswer}
          onChange={(e) => setUserAnswer(e.target.value)}
          placeholder="输入你的答案"
        />
      </div>
      <div style={{gap: '10px', display: 'flex'}}>
        <button onClick={handleCheckAnswer}>检查答案</button>
        <button onClick={handleReset}>重新答题</button>
      </div>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者susant patel