修复 combo>table 中 text 输入可能会被重置的问题 (#1360)

Co-authored-by: 吴多益 <wuduoyi@baidu.com>

src/renderers/Form/Combo.tsx

@@ -1092,7 +1092,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                       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<ComboProps> {
                           onAction: this.handleAction,
                           ref: this.makeFormRef(index),
                           lazyChange: changeImmediately ? false : true,
-                          lazyFormChange: changeImmediately ? false : true,
+                          formLazyChange: false,
                           lazyLoad,
                           canAccessSuperData,
                           value: undefined,

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<ControlProps> {
   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,

src/renderers/QuickEdit.tsx

@@ -470,6 +470,7 @@ export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
             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<QuickEditConfig> = {}) => (
               simpleMode: true,
               onInit: this.handleInit,
               onChange: this.handleChange,
+              formLazyChange: false,
               canAccessSuperData
             })}
           </Component>

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
     };