在react中，通过点击选中组件的两种情况

想要通过点击组件,来进行组件选中与未选中状态的变换，可以分为两种情况，一种是点击哪一项该项选中，其他项不变，即为唯一选中；另一种是点击一项后，再点击其他项，会选中多项，再次点击已选中项会取消选中状态。

下面来分别看一下在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;
  }
}

只需要改写变动的样式即可，其他样式会自动沿用。