You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.6 KiB
114 lines
2.6 KiB
3 years ago
|
---
|
||
|
|
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 />;
|
||
|
|
```
|