Javascript 为所选元素分配一个类名，并在 React 中分配一个正确的类名

发布于11月24日

假设我有一个如下所示的JSON文件:

{
  "data": [
    {
      "question": "What's 1+1",
      "answers": [
        {
          "text": "3",
          "correct": false
        },
        {
          "text": "2",
          "correct": true
        }
      ]
     }
   ]
}

在我的代码中，我迭代了这些答案并 for each 答案呈现了一个按钮.每个按钮还接收如下所示的点击处理程序.当你点击一个按钮时，我想要发生的是，如果它是正确的，我应该给它分配一个(correct)类.但如果是错误的，我会再给它分配(wrong)个班级，但still个班级会显示哪个是正确的.

const handleClick = answer => {
  // How would I implement this logic?
 }

const App = ({ data }) => {

return (
  <div>
   {data.answers.map(answer => (
    <button onClick={() => handleClick(answer)}>{answer.text}</button>
   ))}
  </div>
 )
}

我试图为被点击的按钮创建一个状态变量.然后将其与通过onClick处理程序传递的参数进行比较.

const {useState} = React; const App = ({ data }) => { const [selectedAnswer, setSelectedAnswer] = useState(); const handleClick = answer => { setSelectedAnswer(answer); } return ( <div> {data.answers.map(answer => { const classType = answer.correct ? "correct" : "incorrect"; const showClass = selectedAnswer && (answer.correct || selectedAnswer === answer); return <button key={answer.text} className={showClass && classType} onClick={() => handleClick(answer)}>{answer.text}</button> })} </div> ); } const obj = { "data": [ { "question": "What's 1+1", "answers": [ { "text": "3", "correct": false }, { "text": "2", "correct": true }, { "text": "1", "correct": false } ] } ] } ReactDOM.createRoot(document.body).render(<App data={obj.data[0]} />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

Javascript 为所选元素分配一个类名，并在 React 中分配一个正确的类名

推荐答案

Javascript相关问答推荐

google docs boldText直到按行执行应用脚本错误

如何从网站www.example.com获取表与Cheerio谷歌应用程序脚本

在执行异步导入之前判断模块是否已导入()

以Angular 实现ng-Circle-Progress时出错：模块没有导出的成员

一个实体一刀VS每个实体多刀S

当代码另有说明时，随机放置的圆圈有时会从画布上消失

Google脚本数组映射函数横向输出

使用自动识别发出信号(&Q)

用于部分字符串的JavaScript数组搜索

如何通过Axios在GraphQL查询中发送数组

自动滚动功能在当前图像左侧显示上一张图像的一部分

如何在FiRestore中的事务中使用getCountFromServer

如何在Jest中模拟函数

如何检测当前是否没有按下键盘上的键？

使用props 将VUE 3组件导入JS文件

我想为我的Reaction项目在画布上加载图像/视频，图像正在工作，但视频没有

ReactJS Sweep Line：优化SciChartJS性能，重用wasmContext进行多图表渲染

从客户端更新MongoDB数据库

使用JAVASCRIPT的偏移力矩函数库问题

This.forceUPDATE并通过Reaction-Router-DOM链接组件传递状态