!important 复选框的实现形式

import React from "react"
import PropTypes from "prop-types"

class FromTypeCheckGroup extends React.Component {
  static propTypes = {
    value: PropTypes.array,
    onChange: PropTypes.func,
  }
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(e) {
    let { value } = this.props
    let targetValue = parseInt(e.target.value)
    if (e.target.checked){
      value = [...value, targetValue]
    } else {
      value = value.filter(v => v != targetValue)
    }
    this.props.onChange(value)
  }
  render() {
    let { value } = this.props
    return (
      <div>
        <input type="checkbox" checked={value.includes(1)} value={1} onChange={this.handleChange}/>Web<br/>
        <input type="checkbox" checked={value.includes(2)} value={2} onChange={this.handleChange}/>Pos<br/>
        <input type="checkbox" checked={value.includes(4)} value={4} onChange={this.handleChange}/>Mobile<br/>
        <input type="checkbox" checked={value.includes(8)} value={8} onChange={this.handleChange}/>Kiosk<br/>
      </div>
    )
  }
}

export default FromTypeCheckGroup

屏幕快照 2017-12-26 17.07.43.png 屏幕快照 2017-12-26 17.09.13.png 屏幕快照 2017-12-26 17.09.32.png 屏幕快照 2017-12-26 17.09.45.png