ReactJS UI Ant Design Checkbox 组件

Ant Design 是一个基于 React 的 UI 组件库，提供了一系列漂亮、高效、易用的 UI 组件。其中的 Checkbox 组件可以让用户选择一个或多个选项，并通过回调函数将所选值传递给应用程序。

安装

使用 npm 安装 Ant Design 和 React 并在应用程序中引入：

npm install antd
npm install react

import React from 'react';
import ReactDOM from 'react-dom';
import { Checkbox } from 'antd';

ReactDOM.render(
  <Checkbox>Checkbox</Checkbox>,
  mountNode,
);

示例

基本用法

import React from 'react';
import ReactDOM from 'react-dom';
import { Checkbox } from 'antd';

function onChange(e) {
  console.log(`checked = ${e.target.checked}`);
}

ReactDOM.render(
  <Checkbox onChange={onChange}>Checkbox</Checkbox>,
  mountNode,
);

禁用状态

import React from 'react';
import ReactDOM from 'react-dom';
import { Checkbox } from 'antd';

function onChange(e) {
  console.log(`checked = ${e.target.checked}`);
}

ReactDOM.render(
  <>
    <Checkbox onChange={onChange}>Enabled</Checkbox>
    <Checkbox onChange={onChange} disabled>Disabled</Checkbox>
  </>,
  mountNode,
);

多选框组

import React from 'react';
import ReactDOM from 'react-dom';
import { Checkbox } from 'antd';

const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];

class CheckboxGroup extends React.Component {
  state = {
    checkedList: defaultCheckedList,
    indeterminate: true,
    checkAll: false,
  };

  onChange = checkedList => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll: checkedList.length === plainOptions.length,
    });
  };

  onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };

  render() {
    return (
      <>
        <div style={{ borderBottom: '1px solid #E9E9E9' }}>
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={this.state.checkAll}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        <CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
      </>
    );
  }
}

ReactDOM.render(<CheckboxGroup />, mountNode);

API

Checkbox

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | autoFocus | 自动获取焦点 | boolean | false | | checked | 指定当前是否选中 | boolean | false | | defaultChecked | 初始是否选中 | boolean | false | | disabled | 失效状态 | boolean | false | | indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | | onChange | 变化时回调函数 | Function(e:Event) | 无 | | onClick | 点击时回调函数 | Function(e:Event) | 无 | | onKeyDown | 按下键盘时回调函数 | Function(e:Event) | 无 | | onKeyPress | 按下键盘时回调函数 | Function(e:Event) | 无 | | onKeyUp | 按下键盘时回调函数 | Function(e:Event) | 无 | | value | 设置选中的值 | any | 无 | | className | 自定义类名 | string | 无 |

Checkbox.Group

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | defaultValue | 默认选中的选项 | string[] | 无 | | disabled | 整组失效 | boolean | false | | options | 指定可选项，[{ label: string value: string disabled?: boolean }] | Array<{ label: string value: string disabled?: boolean }> | [] | | value | 指定选中的选项 | string[] | 无 | | onChange | 变化时回调函数 | Function(checkedValue) | 无 |

总结

Ant Design Checkbox 组件提供了基本的单选和多选功能，并提供了很多自定义选项，方便程序员在实际开发中使用和扩展。同时，它也和其他 Ant Design 组件配合使用，可以创建出更丰富、更复杂的 UI 界面。