fix:修复 Modal 中使用两个 Form 一个设置disabled为true 另外一个为false 会造成死循环的问题

src/Card/Card.js

@@ -20,10 +20,14 @@ class Card extends PureComponent {
       formStatus: '',
     }
 
+    this.forms = new Set()
+
     this.bindElement = this.bindElement.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
     this.handleCollapse = this.handleCollapse.bind(this)
     this.setFormStatus = this.setFormStatus.bind(this)
+    this.addForm = this.addForm.bind(this)
+    this.delForm = this.delForm.bind(this)
   }
 
   getCollapsed() {
@@ -33,6 +37,14 @@ class Card extends PureComponent {
   }
 
   setFormStatus(status) {
+    if (this.forms.size > 1) {
+      if (this.state.formStatus !== 'overBound') {
+        this.setState({
+          formStatus: 'overBound',
+        })
+      }
+      return
+    }
     if (status !== this.state.formStatus) {
       this.setState({ formStatus: status })
     }
@@ -56,6 +68,14 @@ class Card extends PureComponent {
     else console.error(new Error('No form found.'))
   }
 
+  addForm(id) {
+    this.forms.add(id)
+  }
+
+  delForm(id) {
+    this.forms.delete(id)
+  }
+
   render() {
     const { collapsible } = this.props
     const collapsed = this.getCollapsed()
@@ -72,6 +92,8 @@ class Card extends PureComponent {
       formStatus: this.state.formStatus,
       onSubmit: this.handleSubmit,
       setFormStatus: this.setFormStatus,
+      addForm: this.addForm,
+      delForm: this.delForm,
     }
 
     return (

src/Card/Submit.js

@@ -8,6 +8,20 @@ class Submit extends PureComponent {
     this.handleClick = this.handleClick.bind(this)
   }
 
+  componentDidMount() {
+    this.check()
+  }
+
+  componentDidUpdate() {
+    this.check()
+  }
+
+  check() {
+    if (this.props.formStatus === 'overBound') {
+      console.error('Modal.Submit cannot be used when there are multiple Forms in Modal')
+    }
+  }
+
   handleClick(e) {
     e.persist()
     setTimeout(() => {

src/Form/Form.js

@@ -48,7 +48,8 @@ class Form extends Component {
   }
 
   componentDidMount() {
-    const { formRef } = this.props
+    const { formRef, addForm } = this.props
+    if (addForm) addForm(this.id)
     if (formRef) {
       if (typeof formRef === 'function') {
         formRef(this.form)
@@ -69,6 +70,8 @@ class Form extends Component {
 
   componentWillUnmount() {
     this.props.datum.formUnmount = true
+    const { delForm } = this.props
+    if (delForm) delForm(this.id)
     if (this.element) {
       this.element.removeEventListener('submit', this.handleSubmit)
     }
@@ -179,6 +182,8 @@ Form.propTypes = {
   scrollToError: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   setFormStatus: PropTypes.func,
   throttle: PropTypes.number,
+  delForm: PropTypes.func,
+  addForm: PropTypes.func,
 }
 
 Form.defaultProps = {

src/Form/index.js

@@ -17,7 +17,7 @@ import useMode from './mode'
 const exportForm = compose(
   Datum.hoc({ type: 'form', bindProps: ['removeUndefined', 'error'] }),
   formProvider
-)(cardConsumer(Form, ['setFormStatus']))
+)(cardConsumer(Form, ['setFormStatus', 'addForm', 'delForm']))
 exportForm.Item = formConsumer(['formDatum', 'labelWidth', 'labelAlign', 'labelVerticalAlign', 'keepErrorHeight'])(Item)
 exportForm.Field = inputable(Field)
 exportForm.Block = formConsumer(['formDatum', 'combineRules'])(Block)