带全选的多选

@aligov/components-check-all

快捷全选 checkbox 组

何时使用

需要全选功能时使用

功能：

Install

tnpm install @aligov/components-check-all --save

API

成员 说明 类型 默认值
value 被选中的值列表 Array []
dataSource 可选项列表, 数据项可为 String 或者 Object
如 ['UNCOMMITTED', 'WAIT_APPROVAL'] 或者 [{ value: 'UNCOMMITTED', label: '未提交' }, { value: 'WAIT_APPROVAL', label: '提交中' }]		 Array []
onChange 选中值改变时的事件
签名:
Function(value: Array) => void
 Function func.noop
disabled 禁用 Boolean false

注意：全选时返回所有子项的列表，不包括"全选"项。如 dataSource 为 ['UNCOMMITTED', 'WAIT_APPROVAL']，则全选返回 ['UNCOMMITTED', 'WAIT_APPROVAL']

DEMO 列表

基础

本 Demo 演示一行文字的用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CheckAll from '@aligov/components-check-all';

// const list = ['UNCOMMITTED', 'WAIT_APPROVAL', 'CANCELED'];
// 或者
const list = [{
  value: 'UNCOMMITTED',
  label: '未提交'
}, {
  value: 'WAIT_APPROVAL',
  label: '提交中'
}, {
  value: 'CANCELED',
  label: '已撤回'
}];

class App extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      value: []
    };
  }

  handleChange = (newValue) => {
    console.log(newValue)
    this.setState({
      value: newValue
    });
  }

  render() {
    const { value } = this.state;

    return <CheckAll value={value} dataSource={list} onChange={this.handleChange} />;
  }
}

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