import React, { useState, useEffect } from 'react' import PropTypes from 'prop-types' import _ from 'lodash' import classnames from 'classnames' import './index.less' function CheckBox(props) { const { style, checked: propsChecked, content, onChange, theme, } = props const wrapperStyle = _.assign({}, style) const [checked, setChecked] = useState(propsChecked === true) useEffect(() => { setChecked(propsChecked) }, [propsChecked]) return ( <div className={classnames({ 'single-checkbox-component-wrap': true, 'theme-dark': theme === 'dark', checked: checked === true, })} onClick={() => { const nextState = !checked setChecked(nextState) onChange(nextState) }} role="button" tabIndex={0} style={wrapperStyle} > <span className="icon" /> <span className="tip">{ content }</span> </div> ) } CheckBox.propTypes = { style: PropTypes.object, checked: PropTypes.bool, content: PropTypes.string.isRequired, onChange: PropTypes.func, theme: PropTypes.string, } CheckBox.defaultProps = { style: {}, checked: false, onChange: _.noop, theme: 'normal', } export default CheckBox
.single-checkbox-component-wrap { display: flex; justify-content: flex-start; align-items: center; cursor: pointer; &.checked { .icon { background-image: url(~ROOT/shared/assets/image/icon-checkbox-checked-30-30.png); } } .icon { display: inline-block; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background-image: url(~ROOT/shared/assets/image/icon-checkbox-unchecked-30-30.png); background-size: 10px; } .tip { font-size: 12px; color: #364152; opacity: 0.4; line-height: 18px; margin-left: 3px; } } .single-checkbox-component-wrap { &.theme-dark { &.checked { .icon { background-image: url(~ROOT/shared/assets/image/icon-checkbox-checked-white-30-30.png); } } .icon { background-image: url(~ROOT/shared/assets/image/icon-checkbox-unchecked-white-30-30.png); } .tip { color: #ffffff; } } }
来源：博客园
作者：贝子涵夕
链接：https://www.cnblogs.com/chenbeibei520/p/11430496.html