-
Notifications
You must be signed in to change notification settings - Fork 297
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix dynamic render of fields with same name #117
Conversation
|
src/createFieldsStore.js
Outdated
this.fieldsMeta[name] = this.fieldsMeta[name] || []; | ||
this.fieldsMeta[name].unshift(); | ||
if (this.fieldsMeta[name].length === 0) { | ||
delete this.fields[name]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里的问题在于,当用户切换表单组件时,是否该保留之前的表单组件的校验信息和值。
还有个 getFieldInstance API 的,这样虽然切换没问题,但是 getFieldInstance 时会拿到 undefined. Lines 290 to 291 in 08d3c15
|
虽然单测没挂,但之前的单测都没有考虑动态切换组件会导致的情况。 所以补充单测时,需要梳理对已有的 API 的可能影响,然后都补充单测。之前 nested field 就是没有考虑到对已有 API 的影响才爆了那么多的问题。 |
下面立刻就绑定了,这里应该没有修改之前的逻辑。 Line 304 in 08d3c15
|
这个 PR 是要解决先 B mount 再 A unmount 的问题,在 A unmount 时就会删除引用了。 |
}); | ||
this.fieldsStore.setFieldMeta(name, this.clearedFieldMetaCache[name].meta); | ||
} | ||
delete this.clearedFieldMetaCache[name]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
换了一个思路做,unmount 的时候留一个缓存。如果相同的 name 再次注册,则恢复现场。
|
我看到在这个简单例子里,替换组件的触发顺序是先 mount 再 unmount @afc163 |
这个修改可以同步到 form@1.x 吗?在用 antd@2,一些动态 fields 的值在提交时无法获取,很头痛 |
@jaredleechn 同求 |
+1 |
直接使用createForm会丢失antd封装的必输(*号)及校验显示,所以第二条不需要改 |
@jaredleechn 我在1.4.x修复了这个问题,但是采用了和官方不一样的解决方案。以下是antd 2.x的替换步骤。
npm i my-rc-form
import createDOMForm from 'my-rc-form/lib/createDOMForm';
import * as React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import { FormCreateOption, ComponentDecorator } from 'antd/lib/form/Form';
import { FIELD_META_PROP } from 'antd/lib/form/constants';
import warning from 'antd/lib/_util/warning';
export const create = function <TOwnProps> (options: FormCreateOption<TOwnProps> = {}): ComponentDecorator<TOwnProps> {
const formWrapper = createDOMForm({
fieldNameProp: 'id',
...options,
fieldMetaProp: FIELD_META_PROP
});
/* eslint-disable react/prefer-es6-class */
return (Component) => formWrapper(createReactClass({
propTypes: {
form: PropTypes.object.isRequired
},
childContextTypes: {
form: PropTypes.object.isRequired
},
getChildContext () {
return {
form: this.props.form
};
},
UNSAFE_componentWillMount () {
this.__getFieldProps = this.props.form.getFieldProps;
},
deprecatedGetFieldProps (name, option) {
warning(
false,
'`getFieldProps` is not recommended, please use `getFieldDecorator` instead, ' +
'see: https://u.ant.design/get-field-decorator'
);
return this.__getFieldProps(name, option);
},
render () {
this.props.form.getFieldProps = this.deprecatedGetFieldProps;
const withRef: any = {};
if (options.withRef) {
withRef.ref = 'formWrappedComponent';
} else if (this.props.wrappedComponentRef) {
withRef.ref = this.props.wrappedComponentRef;
}
return <Component {...this.props} {...withRef} />;
}
}));
};
import { create } from '之前定义的文件地址'
// 用create替换Form.create
create...... 注意: 由于各种原因,导致 |
Consider this situation which is used to throw error when change
this.state.useInput
:close #100
close #53
close ant-design/ant-design#4460
close ant-design/ant-design#4367
close ant-design/ant-design#6117
close ant-design/ant-design#7302
close ant-design/ant-design#7589
close ant-design/ant-design#4478