CheckBox 多选框
多选框。
何时使用
- 在一组可选项中进行多项选择时;
- 单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合。
代码演示
基本使用
import React from 'react';
import ReactDOM from 'react-dom';
import { CheckBox } from 'choerodon-ui/pro';
function handleChange(value, oldValue) {
console.log('[basic]', value, '[oldValue]', oldValue);
}
ReactDOM.render(
<div>
<CheckBox name="base" value="A" onChange={handleChange} defaultChecked>A</CheckBox>
<CheckBox name="base" value="B" onChange={handleChange}>B</CheckBox>
<CheckBox name="base" value="C" onChange={handleChange}>C</CheckBox>
<CheckBox name="base" value="C" onChange={handleChange}>C</CheckBox>
</div>,
document.getElementById('container')
);
受控复选框
受控复选框
import React from 'react';
import ReactDOM from 'react-dom';
import { CheckBox } from 'choerodon-ui/pro';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
values: ['A'],
};
}
handleChange = (value, oldValue) => {
console.log('[controlled]', value, '[oldValues]', oldValue);
const { values } = this.state;
if (value) {
values.push(value);
} else {
values.splice(values.indexOf(value), 1);
}
this.setState({
values,
});
}
render() {
const { values } = this.state;
return (
绑定数据源
绑定数据源
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, CheckBox, Row, Col, Form } from 'choerodon-ui/pro';
function handleChange({ name, value, oldValue }) {
console.log(`[dataset:${name}]`, value, '[oldValue]', oldValue);
}
const data = [
{
bind: 'A',
},
];
class App extends React.Component {
ds = new DataSet({
fields: [
{ name: 'bind', multiple: true },
{ name: 'bind2', type: 'boolean', label: '是否开启' }, // 组件没有children会用label替代
{ name: 'bind3', type: 'boolean', trueValue: 'Y', falseValue: 'N' },
],
data,
events: {
update: handleChange,
},
});
render() {
只读
只读。
import React from 'react';
import ReactDOM from 'react-dom';
import { CheckBox, DataSet } from 'choerodon-ui/pro';
const data = [{ rd: 'C' }];
class App extends React.Component {
ds = new DataSet({
fields: [
{ name: 'rd', readOnly: true },
],
data,
});
render() {
return (
<div>
<CheckBox name="rd" disabled>A</CheckBox>
<CheckBox name="rd" readOnly>B</CheckBox>
<CheckBox dataSet={this.ds} name="rd" value="C">C</CheckBox>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
按钮显示效果
显示成按钮。
import React from 'react';
import ReactDOM from 'react-dom';
import { CheckBox } from 'choerodon-ui/pro';
function handleChange(value, oldValue) {
console.log('[button]', value, '[oldValue]', oldValue);
}
ReactDOM.render(
<div>
<CheckBox mode="button" name="base" value="A" onChange={handleChange} defaultChecked>A</CheckBox>
<CheckBox mode="button" name="base" value="B" onChange={handleChange}>B</CheckBox>
<CheckBox mode="button" name="base" value="C" onChange={handleChange}>C</CheckBox>
</div>,
document.getElementById('container')
);
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
unCheckedValue | 未选中时的值 | any | |
unCheckedChildren | 非选中时的内容 | string | ReactNode | |
indeterminate | 中间状态 | boolean | false |
更多属性请参考 Radio。
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .