diff --git a/src/renderers/Form/Control.tsx b/src/renderers/Form/Control.tsx index c41d349c..1107c343 100644 --- a/src/renderers/Form/Control.tsx +++ b/src/renderers/Form/Control.tsx @@ -32,7 +32,7 @@ export interface ControlProps extends RendererProps { } & Schema; formStore: IFormStore; store: IIRendererStore; - addHook: (fn: () => any) => void; + addHook: (fn: () => any, type?: 'validate' | 'init' | 'flush') => void; removeHook: (fn: () => any) => void; } @@ -147,7 +147,7 @@ export default class FormControl extends React.PureComponent< // 提交前先把之前的 lazyEmit 执行一下。 this.hook3 = () => this.lazyEmitChange.flush(); - addHook(this.hook3); + addHook(this.hook3, 'flush'); const formItem = this.model as IFormItemStore; if (formItem && validate) { diff --git a/src/renderers/Form/Table.tsx b/src/renderers/Form/Table.tsx index 08b3b9c7..86ed54af 100644 --- a/src/renderers/Form/Table.tsx +++ b/src/renderers/Form/Table.tsx @@ -72,6 +72,7 @@ export default class FormTable extends React.Component { entries: Map; entityId: number = 1; subForms: any = {}; + editting: any = {}; constructor(props: TableProps) { super(props); @@ -224,9 +225,17 @@ export default class FormTable extends React.Component { data, env } = this.props; + + // form 是 lazyChange 的,先让他们 flush, 即把未提交的数据提交。 + const subForms: Array = []; + Object.keys(this.subForms).forEach( + key => this.subForms[key] && subForms.push(this.subForms[key]) + ); + subForms.forEach(form => form.flush()); + let newValue = Array.isArray(value) ? value.concat() : []; let item = { - ...this.state.editting + ...this.editting }; const origin = newValue[this.state.editIndex]; @@ -509,7 +518,7 @@ export default class FormTable extends React.Component { if (~this.state.editIndex) { this.setState({ - editting: { + editting: this.editting = { ...rows } }); @@ -553,7 +562,7 @@ export default class FormTable extends React.Component { getEntryId(entry: any) { if (entry === this.state.editting) { - return 'editing'; + return 'editting'; } else if (!this.entries.has(entry)) { this.entries.set(entry, this.entityId++); } diff --git a/src/renderers/Form/index.tsx b/src/renderers/Form/index.tsx index f2319acd..2c869544 100644 --- a/src/renderers/Form/index.tsx +++ b/src/renderers/Form/index.tsx @@ -421,6 +421,7 @@ export default class Form extends React.Component { validate(forceValidate?: boolean): Promise { const {store} = this.props; + this.flush(); return store.validate(this.hooks['validate'] || [], forceValidate); } @@ -432,6 +433,7 @@ export default class Form extends React.Component { submit(fn?: (values: object) => Promise): Promise { const {store, messages} = this.props; + this.flush(); return store.submit( fn, @@ -440,12 +442,19 @@ export default class Form extends React.Component { ); } + // 如果开启了 lazyChange,需要一个 flush 方法把队列中值应用上。 + flush() { + const hooks = this.hooks['flush'] || []; + hooks.forEach(fn => fn()); + this.lazyHandleChange.flush(); + } + reset() { const {store, onReset} = this.props; store.reset(onReset); } - addHook(fn: () => any, type: string = 'validate') { + addHook(fn: () => any, type: 'validate' | 'init' | 'flush' = 'validate') { this.hooks[type] = this.hooks[type] || []; this.hooks[type].push(promisify(fn)); return () => { diff --git a/src/store/form.ts b/src/store/form.ts index 2d5a661a..a5f93af1 100644 --- a/src/store/form.ts +++ b/src/store/form.ts @@ -497,7 +497,11 @@ export const FormStore = ServiceStore.named('FormStore') deleteValueByName, getPersistData, setPersistData, - clearPersistData + clearPersistData, + beforeDestroy() { + syncOptions.cancel(); + setPersistData.cancel(); + } }; });