UNPKG

zent

Version:

一套前端设计语言和基于React的实现

74 lines (61 loc) 2.1 kB
import React, { Component } from 'react'; import Checkbox from '../src'; import '../assets/index.scss'; const CheckboxGroup = Checkbox.Group; /* ## Checkbox 组 */ export default class Simple extends Component { state = { checkedValue1: ['Apple'], checkedValue2: ['Apple'], checkedValue3: ['Apple'], checkedValue4: ['Apple'] } onChange1(checkedValue) { this.setState({ checkedValue1: checkedValue }); } onChange2(checkedValue) { this.setState({ checkedValue2: checkedValue }); } onChange3(checkedValue) { this.setState({ checkedValue3: checkedValue }); } onChange4(checkedValue) { this.setState({ checkedValue4: checkedValue }); } render() { return ( <div> <p>正常状态</p> <CheckboxGroup value={this.state.checkedValue1} onChange={this.onChange1.bind(this)}> <Checkbox value="Apple">苹果</Checkbox> <Checkbox value="Pear"></Checkbox> <Checkbox value="Orange"></Checkbox> </CheckboxGroup> <br /> <p>Checkbox不可用</p> <CheckboxGroup value={this.state.checkedValue2} onChange={this.onChange2.bind(this)}> <Checkbox value="Apple" disabled>苹果</Checkbox> <Checkbox value="Pear"></Checkbox> <Checkbox value="Orange"></Checkbox> </CheckboxGroup> <br /> <p>CheckboxGroup不可用,部分Checkbox可用</p> <CheckboxGroup disabled value={this.state.checkedValue3} onChange={this.onChange3.bind(this)}> <Checkbox value="Apple">苹果</Checkbox> <Checkbox value="Pear"></Checkbox> <Checkbox value="Orange" disabled={false}></Checkbox> </CheckboxGroup> <br /> <p>CheckboxGroup不可用</p> <CheckboxGroup disabled value={this.state.checkedValue4} onChange={this.onChange4.bind(this)}> <Checkbox value="Apple">苹果</Checkbox> <Checkbox value="Pear"></Checkbox> <Checkbox value="Orange"></Checkbox> </CheckboxGroup> <br /> </div> ); } }