react如何实现复选框的部分选择状态

使用react制作组件时，如何实现复选框checkbox的部分选择状态？

上周使用React在做一个后台管理的前端UI界面，应该没什么问题，结果，在联调时，发现在对同一个组件引用多次后，表单控件会“串联“。。。直接上图还是比较好呢。。。

setData 实现数据绑定。。。

用state来控制是否选中

this.state = {
    c1: true,
    c2: false,
    c3: true
}
let { c1, c2, c3 } = this.state
<Checkbox cheacked={c1} />
<Checkbox cheacked={c2} />
<Checkbox cheacked={c3} />

 <div id="root"></div>
<script type="text/babel">
    class FlavorForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {value: ''};
            this.handleChange = this.handleChange.bind(this);
        }

        handleChange(event) {
            this.setState({value: event.target.value});
        }

        render() {
            return (
                    <div>
                        <label > <input type="radio" name='gender' value="Man"
                                        onChange={this.handleChange}/>Man</label><br/>
                        <label > <input type="radio" name='gender' value="Women"
                                        onChange={this.handleChange}/>Women</label>
                        <div>gender: {this.state.value}</div>
                    </div>
            )
        }
    }
    ReactDOM.render(
            <FlavorForm/>,
        document.getElementById('root')
    )
</script>