如何创建一个复选框，在连续点击时同时显示勾号和十字符号？

Question

需要在React中创建一个复选框组件，它在第一次检查时放置刻度线，在下次单击时将其转换为交叉标记，然后在下次连续单击时将其留空。我怎样才能做到这一点 ？下面是我的复选框组件： -

function getStyles(info) {
    var style = {};
    style.position = 'absolute';
    style.width = '16px';
    style.height = '16px';
    style.margin = '4px 0 0';
    style.background = '#EEE';
    style.display = info.display;
    return style;
}

const CheckboxValue = ({value, style}) => (
    <input type="checkbox" style={style} value={value} />
);

export default (props) => {
    return (
        <CheckboxValue style={getStyles(props)} />
    );
}