前言:最近写个了ul li的小模块,这么简单,居然让我费个牛劲,好久不写这种。ui 小细节也挺折磨。
需求:
原本想的是,鼠标移入移出,ul-li背景色发生改变。
最后确认了需求,改为点击之后,背景颜色变化。
<li
key={item.id}
className={styles['wmx-group-left-list__li']}
style={
{ background: currentRow.id === item.id ? '#FEF6D8' : '#fff' }}
onClick={() => getCurrentRow(item, index)}
>
主要就是点击时有一个getCurrentRow方法,获取当前点击的li,
const getCurrentRow = (item, index) => {
if (!checkboxShow) {
setCurrentRow(item);
setCurrentIndex(index);
}
};
然后,在用style判断,背景颜色就会改变。