export default class SelectDiv extends Component {
  state = {
    selects: [],
    renList: [{ name: 'n1' }, { name: 'n2' }, { name: 'n3' }],
  }
  handleCheck = ({ name }) => {
    this.setState(({ selects }) => ({
      selects: selects.includes(name)
        ? selects.filter(item => item !== name)
        : [...selects, name],
    }))
  }
  selectAll = () => {
    this.setState(({ renList }) => ({
      selects: renList.map(item => item.name),
    }))
  }
  cancelSelectAll = () => {
    this.setState(() => ({
      selects: [],
    }))
  }
  render() {
    const { selects: selects, renList } = this.state
    return (
      <div>
        <button onClick={this.selectAll}>选中全部</button>
        <button onClick={this.cancelSelectAll}>取消全部</button>
        {renList.map(subItem => (
          <div>
            <div
              key={subItem.name}
              className={`${css.sunKind} ${
                selects.includes(subItem.name) ? css.active : ''
              }`}
              onClick={() => this.handleCheck(subItem)}
            >
              {subItem.name}
            </div>
          </div>
        ))}
      </div>
    )
  }
}