react实现多选框切换样式逻辑

import React, { Component } from 'react'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
        checkboxItems:[
          {content:"吃",checked:false},
          {content:"喝",checked:false},
          {content:"玩",checked:false},
          {content:"乐",checked:false},
        ] 
      }
  }
  render() { 
    return ( 
      <div>
       {
         this.state.checkboxItems.map((ele,index)=>{
           return (
            <span key={index}>
               <input type="checkbox" name="" value={index} checked={ele.checked} onChange={()=>this.getVal(index)}/><span>{ele.content}</span>
            </span>
           )
         })
       }
      </div>
     );
  }
 
  getVal = (index)=>{
    //复制原来的数组
    var items = [...this.state.checkboxItems]
    //checked取反
    items[index].checked =!items[index].checked
    this.setState({
      //更新checkboxItems全部选项
      checkboxItems:items
    })
  }
}
 
export default App;