source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-08 18:39:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: Why can't the Segmented be disabled? (#56786)

Browse Source 
* docs: add Why can't Segmented be disabled

* Update components/form/index.en-US.md

Signed-off-by: thinkasany <480968828@qq.com>

* Update components/form/index.en-US.md

Signed-off-by: thinkasany <480968828@qq.com>

* Apply suggestion from @meet-student

Signed-off-by: 遇见同学 <1875694521@qq.com>

* Apply suggestion from @meet-student

Signed-off-by: 遇见同学 <1875694521@qq.com>

* docs: update faq

* Update components/form/__tests__/index.test.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>

---------

Signed-off-by: thinkasany <480968828@qq.com>
Signed-off-by: 遇见同学 <1875694521@qq.com>
Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>
Co-authored-by: 遇见同学 <1875694521@qq.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
This commit is contained in:
thinkasany
2026-01-29 11:09:01 +07:00
committed by GitHub
parent f78e800519
commit 3073cf188d
3 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/form/__tests__/index.test.tsx
View File

@@ -28,6 +28,7 @@ import Select from '../../select';
import Slider from '../../slider';
import Switch from '../../switch';
import Popover from '../../popover';
import Segmented from '../../segmented';
import TreeSelect from '../../tree-select';
import Upload from '../../upload';
import type { NamePath } from '../interface';
@@ -1378,6 +1379,20 @@ describe('Form', () => {
expect(container.firstChild).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/pull/54749#issuecomment-3797737096
it('Segmented should not be disabled even Form is disabled', () => {
const { container } = render(
<Form disabled>
<Form.Item name="segmented">
<Segmented options={['Daily', 'Weekly', 'Monthly']} />
</Form.Item>
</Form>,
);
expect(container.querySelector('.ant-segmented')).not.toHaveClass(
'ant-segmented-disabled',
);
});
it('form.item should support layout', () => {
const App: React.FC = () => (
<Form layout="horizontal">

4
components/form/index.en-US.md
View File

@@ -578,6 +578,10 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
## FAQ
### Why can't Segmented be disabled by Form `disabled`? {#faq-segmented-cannot-disabled}
Segmented is designed as a data display component, not a form control component. Although it can be used as a form control similar to Radio, it was not designed for this purpose. Therefore, its behavior is more similar to the Tabs component and will not be disabled by Form's `disabled` prop. For related discussions, see [#54749](https://github.com/ant-design/ant-design/pull/54749#issuecomment-3797737096).
### Why can't Switch, Checkbox bind data? {#faq-switch-checkbox-binding}
Form.Item default bind value to `value` prop, but Switch or Checkbox value prop is `checked`. You can use `valuePropName` to change bind value prop.

4
components/form/index.zh-CN.md
View File

@@ -577,6 +577,10 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
## FAQ
### Segmented 为什么不能被 Form `disabled` 禁用? {#faq-segmented-cannot-disabled}
Segmented 设计上为数据展示类组件，而非表单控件组件。虽然它可以作为类似 Radio 的表单控件使用，但并非为此设计。因而行为上更类似于 Tabs 组件，不会被 Form 的 `disabled` 所禁用。相关讨论参考 [#54749](https://github.com/ant-design/ant-design/pull/54749#issuecomment-3797737096)。
### Switch、Checkbox 为什么不能绑定数据？ {#faq-switch-checkbox-binding}
Form.Item 默认绑定值属性到 `value` 上，而 Switch、Checkbox 等组件的值属性为 `checked`。你可以通过 `valuePropName` 来修改绑定的值属性。