mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: misc update (#44034)
* docs: misc update * docs: update * docs: update * docs: update * Update components/form/index.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com> --------- Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
parent
527e1bf03e
commit
9427c264f4
@ -646,3 +646,31 @@ Form can not get real DOM node when customize component not support `ref`. It wi
|
||||
### `setFieldsValue` do not trigger `onFieldsChange` or `onValuesChange`?
|
||||
|
||||
It's by design. Only user interactive can trigger the change event. This design is aim to avoid call `setFieldsValue` in change event which may makes loop calling.
|
||||
|
||||
### Why Form.Item not update value when children is nest?
|
||||
|
||||
Form.Item will inject `value` and `onChange` to children when render. Once your field component is wrapped, props will not pass to the correct node. Follow code will not work as expect:
|
||||
|
||||
```jsx
|
||||
<Form.Item name="input">
|
||||
<div>
|
||||
<h3>I am a wrapped Input</h3>
|
||||
<Input />
|
||||
</div>
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
You can use HOC to solve this problem, don't forget passing props to form control component:
|
||||
|
||||
```jsx
|
||||
const MyInput = (props) => (
|
||||
<div>
|
||||
<h3>I am a wrapped Input</h3>
|
||||
<Input {...props} />
|
||||
</div>
|
||||
);
|
||||
|
||||
<Form.Item name="input">
|
||||
<MyInput />
|
||||
</Form.Item>;
|
||||
```
|
||||
|
@ -646,6 +646,34 @@ React 中异步更新会导致受控组件交互行为异常。当用户交互
|
||||
|
||||
是的,change 事件仅当用户交互才会触发。该设计是为了防止在 change 事件中调用 `setFieldsValue` 导致的循环问题。如果仅仅需要组件内消费,可以通过 `useWatch` 或者 `Field.renderProps` 来实现。
|
||||
|
||||
### 为什么 Form.Item 嵌套子组件后,不更新表单值?
|
||||
|
||||
Form.Item 在渲染时会注入 `value` 与 `onChange` 事件给子元素,当你的字段组件被包裹时属性将无法传递。所以以下代码是不会生效的:
|
||||
|
||||
```jsx
|
||||
<Form.Item name="input">
|
||||
<div>
|
||||
<h3>I am a wrapped Input</h3>
|
||||
<Input />
|
||||
</div>
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
你可以通过 HOC 自定义组件形式来解决这个问题:
|
||||
|
||||
```jsx
|
||||
const MyInput = (props) => (
|
||||
<div>
|
||||
<h3>I am a wrapped Input</h3>
|
||||
<Input {...props} />
|
||||
</div>
|
||||
);
|
||||
|
||||
<Form.Item name="input">
|
||||
<MyInput />
|
||||
</Form.Item>;
|
||||
```
|
||||
|
||||
### 有更多参考文档吗?
|
||||
|
||||
- 你可以阅读[《antd v4 Form 使用心得》](https://zhuanlan.zhihu.com/p/375753910)获得一些使用帮助以及建议。
|
||||
|
@ -44,6 +44,7 @@ const DEPRECIATED_VERSION = {
|
||||
'https://github.com/ant-design/ant-design/issues/43654',
|
||||
'https://github.com/ant-design/ant-design/issues/43684',
|
||||
],
|
||||
'5.8.0': ['https://github.com/ant-design/ant-design/issues/43943'],
|
||||
};
|
||||
|
||||
function matchDeprecated(version) {
|
||||
|
Loading…
Reference in New Issue
Block a user