选中与非选中状态转换

.root {
  display: flex;
  flex-wrap: wrap;
  span {
    padding: 4px 12px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    line-height: 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin-bottom: 8px;
  }
  .active {
    padding: 4px 12px;
    color: #fff;
    font-size: 12px;
    line-height: 14px;
    background: #0055ff;
    cursor: pointer;
  }
}

import React, { useState } from 'react';
import styles from './index.less';


const handleList = (newList) => {
  const tempt = [];
  newList.forEach((item) => {
    tempt.push({
      label: item,
      isChecked: false,
    });
  });
  return tempt;
};
const LabelSelect = (props) => {
  const { list } = props; // list格式 ['例子1','例子2']
  const [labelList, setLabelList] = useState(handleList(list));

  const clickTag = (i) => {
    const tempt = [...labelList];
    labelList.forEach((item, index) => {
      if (index === i) {
        tempt[i].isChecked = !tempt[i].isChecked;
      }
    });
    setLabelList(tempt);
  };
  return (
    <div className={styles.root}>
      {
        labelList.map((item, index) => (
          <span
            onClick={() => clickTag(index)}
            className={item.isChecked && styles.active}
            key={index}
            style={{ marginRight: '8px' }}
          >
            {item.label}
          </span>
        ))
      }
    </div>
  );
};

export default LabelSelect;