diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index 242002cf6..88ef8e0e7 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -1092,7 +1092,7 @@ export default class ComboControl extends React.Component { ref: this.makeFormRef(index), canAccessSuperData, lazyChange: changeImmediately ? false : true, - lazyFormChange: changeImmediately ? false : true, + formLazyChange: false, value: undefined, formItemValue: undefined } @@ -1274,7 +1274,7 @@ export default class ComboControl extends React.Component { onAction: this.handleAction, ref: this.makeFormRef(index), lazyChange: changeImmediately ? false : true, - lazyFormChange: changeImmediately ? false : true, + formLazyChange: false, lazyLoad, canAccessSuperData, value: undefined, diff --git a/src/renderers/Form/Control.tsx b/src/renderers/Form/Control.tsx index 846a78cc0..6c74d5dca 100644 --- a/src/renderers/Form/Control.tsx +++ b/src/renderers/Form/Control.tsx @@ -22,6 +22,7 @@ import {ScopedContext, IScopedContext} from '../../Scoped'; import {reaction} from 'mobx'; import {FormItemStore} from '../../store/formItem'; import {isAlive} from 'mobx-state-tree'; +import {observer} from 'mobx-react'; export interface ControlProps extends RendererProps { control: { @@ -45,6 +46,8 @@ export interface ControlProps extends RendererProps { } & Schema; rootStore: IRendererStore; formStore: IFormStore; + onChange?: (value: any, name: string, submit: boolean) => void; + // onTmpValueChange?: (value: any, name: string) => void; store: IIRendererStore; addHook: (fn: () => any, type?: 'validate' | 'init' | 'flush') => void; removeHook: (fn: () => any, type?: 'validate' | 'init' | 'flush') => void; @@ -54,10 +57,8 @@ interface ControlState { value: any; } -export default class FormControl extends React.PureComponent< - ControlProps, - ControlState -> { +@observer +export default class FormControl extends React.PureComponent { static propsList: any = ['control']; public model: IFormItemStore | undefined; control: any; @@ -77,7 +78,6 @@ export default class FormControl extends React.PureComponent< trailing: true, leading: false }); - state = {value: (this.value = this.props.control.value)}; componentWillMount() { const { formStore: form, @@ -149,12 +149,15 @@ export default class FormControl extends React.PureComponent< } // 同步 value - this.setState({ - value: (this.value = model.value) - }); + model.changeTmpValue(model.value); this.reaction = reaction( () => model.value, - value => this.setState({value: (this.value = value)}) + value => { + if (value === model.tmpValue) { + return; + } + model.changeTmpValue(value); + } ); } @@ -369,7 +372,7 @@ export default class FormControl extends React.PureComponent< // todo 以后想办法不要強耦合类型。 ~['service', 'group', 'hbox', 'panel', 'grid'].indexOf(type) ) { - onChange && onChange(...(arguments as any)); + onChange && onChange.apply(null, arguments as any); return; } @@ -378,12 +381,13 @@ export default class FormControl extends React.PureComponent< value = pipeOut(value, oldValue, form.data); } - this.setState({ - value: (this.value = value) - }); - changeImmediately || conrolChangeImmediately || !formInited - ? this.emitChange(submitOnChange) - : this.lazyEmitChange(submitOnChange); + this.model.changeTmpValue(value); + if (changeImmediately || conrolChangeImmediately || !formInited) { + this.emitChange(submitOnChange); + } else { + // this.props.onTmpValueChange?.(value, this.model.name); + this.lazyEmitChange(submitOnChange); + } } emitChange(submitOnChange: boolean = this.props.control.submitOnChange) { @@ -396,7 +400,7 @@ export default class FormControl extends React.PureComponent< if (!this.model) { return; } - const value = this.value; // value 跟 this.state.value 更及时。 + const value = this.model.tmpValue; const oldValue = this.model.value; if (oldValue === value) { @@ -416,7 +420,7 @@ export default class FormControl extends React.PureComponent< } onFormItemChange && onFormItemChange(value, oldValue, this.model, form); - onChange && onChange(value, name, submitOnChange === true); + onChange && onChange(value, name!, submitOnChange === true); } handleBlur(e: any) { @@ -497,7 +501,7 @@ export default class FormControl extends React.PureComponent< getValue() { const {formStore: form, control} = this.props; - let value: any = this.state.value; + let value: any = this.model?.tmpValue; if (control.pipeIn) { value = control.pipeIn(value, form.data); @@ -551,6 +555,7 @@ export default class FormControl extends React.PureComponent< formItemValue: value, // 为了兼容老版本的自定义组件 onChange: control.type === 'input-group' ? superOnChange : this.handleChange, + onBlur: this.handleBlur, setValue: this.setValue, getValue: this.getValue, diff --git a/src/renderers/QuickEdit.tsx b/src/renderers/QuickEdit.tsx index 3dceeac1e..7058487b9 100644 --- a/src/renderers/QuickEdit.tsx +++ b/src/renderers/QuickEdit.tsx @@ -470,6 +470,7 @@ export const HocQuickEdit = (config: Partial = {}) => ( onSubmit: this.handleSubmit, onAction: this.handleAction, onChange: null, + formLazyChange: false, ref: this.formRef, popOverContainer: () => this.overlay, canAccessSuperData @@ -528,6 +529,7 @@ export const HocQuickEdit = (config: Partial = {}) => ( simpleMode: true, onInit: this.handleInit, onChange: this.handleChange, + formLazyChange: false, canAccessSuperData })} diff --git a/src/store/formItem.ts b/src/store/formItem.ts index 037a913b7..ab402a560 100644 --- a/src/store/formItem.ts +++ b/src/store/formItem.ts @@ -56,6 +56,7 @@ export const FormItemStore = StoreNode.named('FormItemStore') unique: false, loading: false, required: false, + tmpValue: types.frozen(), rules: types.optional(types.frozen(), {}), messages: types.optional(types.frozen(), {}), errorData: types.optional(types.array(ErrorDetail), []), @@ -826,6 +827,10 @@ export const FormItemStore = StoreNode.named('FormItemStore') } } + function changeTmpValue(value: any) { + self.tmpValue = value; + } + function addSubFormItem(item: IFormItemStore) { self.itemsRef.push(item.id); } @@ -857,6 +862,7 @@ export const FormItemStore = StoreNode.named('FormItemStore') openDialog, closeDialog, syncAutoFill, + changeTmpValue, addSubFormItem, removeSubFormItem };