想要通过点击组件,来进行组件选中与未选中状态的变换,可以分为两种情况,一种是点击哪一项该项选中,其他项不变,即为唯一选中;另一种是点击一项后,再点击其他项,会选中多项,再次点击已选中项会取消选中状态。
下面来分别看一下在react中的两种实现手法,基本思路都是通过state来控制选择项,通过三元运算符来进行组件样式的变换。
第一种,唯一选中:
先在model文件中写state,state里设置一个变量来标识当前选中项
namespace: 'InfoOverview',
state: {
longLineState: 1, //唯一标识当前项
},
在组件文件中,连接model后,先为每一项组件建立唯一标识ID,再根据ID与longLineState判断值来进行组件样式的变换。
const {InfoOverview, dispatch, longLineID} = this.props;
let { longLineState } = InfoOverview;
const changeLong =(longLineID) => {
dispatch({
type: 'InfoOverview/upState',
payload: {
longLineState: longLineID,
}
})
};
return (
<div
className={longLineState === longLineID ? styles.longLineBox2 : styles.longLine}
onClick={() => changeLong(longLineID)}
>...</div>
这样,每一次点击就会将当前项ID置为longLineState,ID与longLineState相等时呈现选中样式,ID与longLineState不等时呈现原样式不变,这样就实现了唯一选中的效果。
第二种:多项选中,可取消选中:
思路相差不多,先在model文件中写state,state里设置一个数组来标识当前选中项们
namespace: 'InfoOverview',
state: {
longLineState: [1,2], //标识当前选中项,此时为第一项和第二项被默认选中
},
组件文件连接model后,通过判断数组中是否包含某项ID来为它设置样式,某项被点击时,如果它被包含于数组,则表明它已被选中,所以我们要将他从数组中删除来取消选中状态;如果它不在数组中,则我们要在数组中添加它来使它处于选中状态。
const {InfoOverview, dispatch, longLineID} = this.props;
let { longLineState } = InfoOverview;
const checkItem = longLineState.indexOf(longLineID);
const changeLong =(longLineID) => {
checkItem > -1 ? longLineState.splice(checkItem, 1): longLineState.push(longLineID);
dispatch({
type: 'InfoOverview/upState',
payload: {
longLineState: longLineState,
}
})
};
return (
<div
className={checkItem > -1 ? styles.longLineBox2 : styles.longLine}
onClick={() => changeLong(longLineID)}
>...</div>
数组中的组件项ID即为选中项,没有ID的组件项即为未选中项。
另外,提一句鼠标悬浮在组件上时样式变换写法:
原样式:
.longLine {
height: 38px;
width: 90%;
border: 1px solid rgba(143, 182, 239, 1);
border-radius: 27px;
text-align: center;
margin-left: auto;
margin-right: auto;
line-height: 38px;
font-size: 16px;
margin-top: 20px;
margin-bottom: 20px;
.longLineImg {
height: 26px;
width: 26px;
}
.longLineText {
text-align: left;
color:rgb(102, 153, 255);
}
.longLineNum {
color: rgb(255, 153, 0);
}
}
悬浮样式:
.longLine:hover {
background-color: rgba(143, 182, 239, 1);
.longLineText {
color:white;
}
.longLineNum {
color: white;
}
}
只需要改写变动的样式即可,其他样式会自动沿用。