CheckBox 多选框

多选框。

何时使用

  • 在一组可选项中进行多项选择时;
  • 单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合。

代码演示

基本使用

CheckBox多选框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { CheckBox } from 'choerodon-ui/pro';
  4. function handleChange(value, oldValue) {
  5. console.log('[basic]', value, '[oldValue]', oldValue);
  6. }
  7. ReactDOM.render(
  8. <div>
  9. <CheckBox name="base" value="A" onChange={handleChange} defaultChecked>A</CheckBox>
  10. <CheckBox name="base" value="B" onChange={handleChange}>B</CheckBox>
  11. <CheckBox name="base" value="C" onChange={handleChange}>C</CheckBox>
  12. <CheckBox name="base" value="C" onChange={handleChange}>C</CheckBox>
  13. </div>,
  14. document.getElementById('container')
  15. );

受控复选框

受控复选框

CheckBox多选框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { CheckBox } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. values: ['A'],
  9. };
  10. }
  11. handleChange = (value, oldValue) => {
  12. console.log('[controlled]', value, '[oldValues]', oldValue);
  13. const { values } = this.state;
  14. if (value) {
  15. values.push(value);
  16. } else {
  17. values.splice(values.indexOf(value), 1);
  18. }
  19. this.setState({
  20. values,
  21. });
  22. }
  23. render() {
  24. const { values } = this.state;
  25. return (

绑定数据源

绑定数据源

CheckBox多选框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, CheckBox, Row, Col, Form } from 'choerodon-ui/pro';
  4. function handleChange({ name, value, oldValue }) {
  5. console.log(`[dataset:${name}]`, value, '[oldValue]', oldValue);
  6. }
  7. const data = [
  8. {
  9. bind: 'A',
  10. },
  11. ];
  12. class App extends React.Component {
  13. ds = new DataSet({
  14. fields: [
  15. { name: 'bind', multiple: true },
  16. { name: 'bind2', type: 'boolean', label: '是否开启' }, // 组件没有children会用label替代
  17. { name: 'bind3', type: 'boolean', trueValue: 'Y', falseValue: 'N' },
  18. ],
  19. data,
  20. events: {
  21. update: handleChange,
  22. },
  23. });
  24. render() {

只读

只读。

CheckBox多选框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { CheckBox, DataSet } from 'choerodon-ui/pro';
  4. const data = [{ rd: 'C' }];
  5. class App extends React.Component {
  6. ds = new DataSet({
  7. fields: [
  8. { name: 'rd', readOnly: true },
  9. ],
  10. data,
  11. });
  12. render() {
  13. return (
  14. <div>
  15. <CheckBox name="rd" disabled>A</CheckBox>
  16. <CheckBox name="rd" readOnly>B</CheckBox>
  17. <CheckBox dataSet={this.ds} name="rd" value="C">C</CheckBox>
  18. </div>
  19. );
  20. }
  21. }
  22. ReactDOM.render(
  23. <App />,
  24. document.getElementById('container')

按钮显示效果

显示成按钮。

CheckBox多选框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { CheckBox } from 'choerodon-ui/pro';
  4. function handleChange(value, oldValue) {
  5. console.log('[button]', value, '[oldValue]', oldValue);
  6. }
  7. ReactDOM.render(
  8. <div>
  9. <CheckBox mode="button" name="base" value="A" onChange={handleChange} defaultChecked>A</CheckBox>
  10. <CheckBox mode="button" name="base" value="B" onChange={handleChange}>B</CheckBox>
  11. <CheckBox mode="button" name="base" value="C" onChange={handleChange}>C</CheckBox>
  12. </div>,
  13. document.getElementById('container')
  14. );

API

参数说明类型默认值
unCheckedValue未选中时的值any
unCheckedChildren非选中时的内容string | ReactNode
indeterminate中间状态booleanfalse

更多属性请参考 Radio