mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +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.3 KiB
1.3 KiB
| order | title | ||||
|---|---|---|---|---|---|
| 2 |
|
zh-CN
联动 checkbox。
en-US
Communicated with other components.
import React, { useState } from 'react';
import { Checkbox, Button } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
const App: React.FC = () => {
const [checked, setChecked] = useState(true);
const [disabled, setDisabled] = useState(false);
const toggleChecked = () => {
setChecked(!checked);
};
const toggleDisable = () => {
setDisabled(!disabled);
};
const onChange = (e: CheckboxChangeEvent) => {
console.log('checked = ', e.target.checked);
setChecked(e.target.checked);
};
const label = `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;
return (
<>
<p style={{ marginBottom: '20px' }}>
<Checkbox checked={checked} disabled={disabled} onChange={onChange}>
{label}
</Checkbox>
</p>
<p>
<Button type="primary" size="small" onClick={toggleChecked}>
{!checked ? 'Check' : 'Uncheck'}
</Button>
<Button style={{ margin: '0 10px' }} type="primary" size="small" onClick={toggleDisable}>
{!disabled ? 'Disable' : 'Enable'}
</Button>
</p>
</>
);
};
export default App;