mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 07:39:10 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
1.2 KiB
1.2 KiB
| order | title | ||||
|---|---|---|---|---|---|
| 3 |
|
zh-CN
方便的从数组生成 Checkbox 组。
en-US
Generate a group of checkboxes from an array.
import React from 'react';
import { Checkbox } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
const onChange = (checkedValues: CheckboxValueType[]) => {
console.log('checked = ', checkedValues);
};
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false },
];
const App: React.FC = () => (
<>
<Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
<br />
<br />
<Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
<br />
<br />
<Checkbox.Group
options={optionsWithDisabled}
disabled
defaultValue={['Apple']}
onChange={onChange}
/>
</>
);
export default App;