onClick事件可使用Hooks更改映射数组中的className

Question

我正在尝试创建一个答案表，有时被称为"气泡片"；，用户点击"；A、 B、C或D"；并且气泡从"；"亮模式到暗模式"；当身体发生变化时，用铅笔写下答案。(使用Tailwind.css(

我遇到了一个问题，1(只有一个答案可以改变状态(它们都会改变(，2(每个问题只能选择一个答案(a、B、C或D(。任何帮助都将不胜感激，因为我离终点很近，但在终点线前(可以这么说(被绊倒了。

我传入了从父组件开始的props.start和重复组件，以25为增量构建答题纸。你可以很容易地不通过任何道具并更换"道具"；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>

Answer 1

您必须实现这一点。

设置默认状态const [visibleOption,setVisible] = useState('')、const [selctedIndex,setSelctedIndex] = useState('')和InhandleClick您必须设置您传递的值，作为回报，根据条件应用ClassName＝｛${cName} ${visibleOtion === 'A' && visibleClass}｝。

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>

我希望它对你有用。

Answer 2

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