反应如何将动态类添加到选中的radio/checkbox的父元素中

Question

在我的react-应用程序中，我有一个复选框/单选按钮列表-选中时，我想添加一个"选择"；或"；活动的"-类添加到父<li>-标记。

这是我的代码：

const App = ({data}) => {
const [selected, setSelected] = useState([]);
const changeHandler = (e) => {
setSelected([...selected, e.target.value]);
};

return (
<div>
<ul>
{data.options.map((option) => (
<li key={option.id}>
<div>
<label>
<input
type={data.type === "multiple" ? "checkbox" : "radio"}
name="answer"
id={option.id}
value={option.text}
onChange={(e) => changeHandler(e)}
className="chkbox"
/>
</label>
<h1>
{option.title}
</h1>
</div>
</li>
))}
</ul>
</div>       
)
}

我的目标是DOM看起来像这个

<ul>
<li class="selected">*...some option*</li> // checked
<li>*...some option*</li>
<li>*...some option*</li>
<li class="selected">*...some option*</li> // checked
<li>*...some option*</li>
</ul>

那么我该如何做到这一点呢？

Answer 1

也许您可以向option.id的li标记添加一个id，然后在changeHandler上使用document.getElementById(option.id)来获取li元素并向其添加selected类。

但我认为更好的方法是创建一个useState变量，该变量存储具有所有option.id的对象，并添加类似<li key={option.id} className={optionsObj[option.id] && 'active'}>的内容

Answer 2

使用React，我更喜欢避免任何"；"直接接触"；使用实际DOM，并继续使用React DOM。你为什么不使用类似"；状态"；变量

<li class={stateVariable}> ... some option </li>

通过这种方式，样式将取决于保持在stateVariable的值，该值可以是"0"；选择"；。由于将来你可能会接触到手机应用程序，我建议你也学习使用对象的样式。