У меня есть страница из списка div, вызывающих функцию onClick. В значительной степени это ...
<div
className="square card-container bg-primary"
points="200"
id="2"
onClick={e => select(200, "cat1", e.target.id)}
>
<h3 className="text-light">200</h3>
</div>
Только 30 из них. С последовательными идентификаторами. Достаточно просто вставить sh идентификаторы в новый массив при щелчке или добавить className после того, как они нажаты, и когда я перебираю код в Debugger, я вижу, что класс добавлен и стили меняются, но он сразу же возвращается к предыдущему «un-clicked» className. Я думал, что это может сработать, чтобы сделать каждый из этих элементов div своим собственным компонентом, а затем использовать useState, но, поскольку все они в основном идентичны, мне все равно понадобится ключ или идентификатор, поэтому я не уверен, как передать это в в состояние и использовать это условно? Извините, если это не имеет смысла. По сути, я просто хочу немного изменить стили после выбора элемента, не возвращаясь к исходному className при повторной визуализации. Это скрипт, который вызывается onClick.
const selected = []
const change = id => {
selected.push(id);
console.log(selected);
};
const select = (points, cat, id) => {
let newArr = questions.filter(
q => q.category === "Sample 1" && q.points === points
);
change(id);
if (newArr.length > 1) {
let randomOutput = Math.floor(Math.random() * newArr.length);
console.log(newArr[randomOutput]);
let out = newArr[randomOutput];
props.setQuestion({ out });
props.detail();
return out;
} else {
let out = newArr;
props.setQuestion({ out });
props.detail();
console.log(points, cat);
}
}