onClick 事件以使用 Hooks 更改映射数组中的 className答案

【问题标题】：onClick event to change className in mapped array with HooksonClick 事件以使用 Hooks 更改映射数组中的 className
【发布时间】：2020-11-30 07:55:18
【问题描述】：

我正在尝试创建一个答题卡，有时也称为“气泡表”，其中用户单击“A、B、C 或 D”，并且气泡从“浅色模式”变为“深色模式”当身体发生在答案中时。（使用 Tailwind.css）

我遇到的问题是 1) 只获得一个答案来改变状态（它们都改变了）和 2) 只能选择每个问题的答案之一（A、B、C 或 D）。任何帮助都将不胜感激，因为我已经接近但在终点线之前被难住了（可以这么说）。

我从父组件传入 props.start 并重复组件以 25 为增量构建答题纸。您可以轻松地不传递任何 props 并将“props.start”替换为 1 来测试这一点。

import React, { useState } from 'react';

const Bubbles = (props) => {
  const [cName, setCname] = useState(
    'rounded-full px-2 mx-1 border border-red-600 hover:bg-gray-700 hover:text-white'
  );

  const handleClick = (event) => {
    event.preventDefault();
    const answer = event.target.id;
    setCname(
      'rounded-full px-2 mx-1 border border-red-600 bg-gray-700 text-white'
    );
    console.log(answer);
  };

  const NumberedArray = Array.from(Array(25), (_, i) => i + props.start);

  return (
    <div className='flex flex-wrap flex-col mx-3 overflow-hidden rounded'>
      {NumberedArray.map((number, index) => (
        <div
          className='flex h-10 w-full items-center justify-center bg-gray-100'
          key={index}
        >
          {number}
          <div id='A' className={cName} onClick={handleClick}>
            A
          </div>
          <div id='B' className={cName} onClick={handleClick}>
            B
          </div>
          <div id='C' className={cName} onClick={handleClick}>
            C
          </div>
          <div id='D' className={cName} onClick={handleClick}>
            D
          </div>
        </div>
      ))}
    </div>
  );
};
export default Bubbles;

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

【问题讨论】：

你太棒了，非常感谢你的帮助，这是为准备律师考试的人准备的，这样他们就不必写上昂贵的准备材料，并且可以转售它们（未标记）。
props.start 等于什么，所以我可以在代码和框上重现它
您可以使用 1，当我重复组件时，它看起来像这样：Bubbles start={1}

标签： javascript arrays reactjs next.js tailwind-css

【解决方案1】：

你必须实现它。

设置默认状态 const [visibleOption,setVisible] = useState('') ， const [selctedIndex,setSelctedIndex] = useState('') 并在 handleClick 中，您必须设置您传递的值，然后根据条件明智地应用 ClassName className={@ 987654323@}.

    const [visibleOption,setVisible] = useState('')
    const [selctedIndex,setSelctedIndex] = useState('')

    const visibleClass = 'rounded-full px-2 mx-1 border border-red-600 bg-gray-700 text-white'

    const handleClick = (event,value,index) => {
    event.preventDefault();
    const answer = event.target.id;
    setVisible(value)
    setSelctedIndex(index.toString())
    console.log(answer);
    };

     //In return written like this

      <div id='A' className={`${cName} ${visibleOtion === 'A' && selctedIndex === index.toString() && visibleClass}`} onClick={(e) => handleClick(e, 'A',index)}>
        A
      </div>

我希望它对你有用。

【讨论】：

1) 所以这解决了“或”问题，因为您只能选择 A、B、C 或 D。谢谢！ 2) 但是，当单击“A”时，剩余的 24 个答案也都变为 A。（使用建议的返回码）。
@SteveFinley 我已经更新了代码，请看一下。
希望我能给出答案，但这将是大多数情况下的方法。
我建议您拆分组件，这样您就可以避免 handleClick 更改所有值。
快到了！剩下的唯一调整是用户只能回答 1/25 个问题。在另一行选择答案（例如问题 #2）会清除问题 1 中的答案。它比我得到的要近得多。我很谦虚，因为这个问题已经夺走了我的生命。

【解决方案2】：

将其分解为 2 个独立的组件。 1) ABCD 和 2) 气泡。在 ABCD 中，映射答案数组。在气泡中，绘制 25 行答案。这样您就可以在 ABCD 组件中选择答案，并且不会遇到与我相同的问题。

【讨论】：