ant-design/components/form/demo/disabled.md
黑雨 b0a652580a
feat: Form disabled (#35210)
* feat: add form disabled

* feat: add form disabled

* feat: add radio disabled

* feat: update snap

* feat: add test case
2022-04-29 20:48:10 +08:00

114 lines
2.6 KiB
Markdown

---
order: 3.1
title:
zh-CN: 表单禁用
en-US: Form disabled
---
## zh-CN
设置表单组件禁用,仅对 antd 组件有效。
## en-US
Set component disabled, only works for antd components.
```tsx
import React, { useState } from 'react';
import {
Form,
Input,
Button,
Radio,
Select,
Cascader,
DatePicker,
InputNumber,
TreeSelect,
Switch,
Checkbox,
} from 'antd';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const FormDisabledDemo = () => {
const [componentDisabled, setComponentDisabled] = useState<boolean>(true);
const onFormLayoutChange = ({ disabled }: { disabled: boolean }) => {
setComponentDisabled(disabled);
};
return (
<Form
labelCol={{ span: 4 }}
wrapperCol={{ span: 14 }}
layout="horizontal"
initialValues={{ disabled: componentDisabled }}
onValuesChange={onFormLayoutChange}
disabled={componentDisabled}
>
<Form.Item label="Form disabled" name="disabled" valuePropName="checked">
<Checkbox>disabled</Checkbox>
</Form.Item>
<Form.Item label="Radio">
<Radio.Group>
<Radio value="apple"> Apple </Radio>
<Radio value="pear"> Pear </Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="Input">
<Input />
</Form.Item>
<Form.Item label="Select">
<Select>
<Select.Option value="demo">Demo</Select.Option>
</Select>
</Form.Item>
<Form.Item label="TreeSelect">
<TreeSelect
treeData={[
{ title: 'Light', value: 'light', children: [{ title: 'Bamboo', value: 'bamboo' }] },
]}
/>
</Form.Item>
<Form.Item label="Cascader">
<Cascader
options={[
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
},
],
},
]}
/>
</Form.Item>
<Form.Item label="DatePicker">
<DatePicker />
</Form.Item>
<Form.Item label="RangePicker">
<RangePicker />
</Form.Item>
<Form.Item label="InputNumber">
<InputNumber />
</Form.Item>
<Form.Item label="TextArea">
<TextArea rows={4} />
</Form.Item>
<Form.Item label="Switch" valuePropName="checked">
<Switch />
</Form.Item>
<Form.Item label="Button">
<Button>Button</Button>
</Form.Item>
</Form>
);
};
export default () => <FormDisabledDemo />;
```