想要通過點選元件,來進行元件選中與未選中狀態的變換，可以分為兩種情況，一種是點選哪一項該項選中，其他項不變，即為唯一選中；另一種是點選一項後，再點選其他項，會選中多項，再次點選已選中項會取消選中狀態。

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

只需要改寫變動的樣式即可，其他樣式會自動沿用。