Dva: 高阶函数connect和antd里form.create如何结合使用？

[miaojiuchen]

connect放外面报错，create放外面会出现props获取undefined的问题

[miaojiuchen]

onFieldsChange事件里，log打出来左边是props，右边是fields参数

[miaojiuchen]

fields参数获取是正常的

[miaojiuchen]

@sorrycc

[miaojiuchen]

connect放外层是正确的，里面组件报错传到外面我以为是包装函数的问题。

但是create放外层获取props不正确的问题还是存在

[miaojiuchen]

@sorrycc 可以帮忙解决一下吗？明天白天我会建一个codepen，请您帮忙看下
在
form.create(
dva.connect(mpts)(Component)
)
这种情况下，onFieldsChange第一个参数获取props为空对象的问题

[miaojiuchen]

确切的说是，获取不到dva的相关字段，比如dispatch

[sorrycc]

写个完整的可重现例子吧，没能理解到问题的点。

[miaojiuchen]

http://codepen.io/anon/pen/apodJj?editors=1010
可重现的例子

[miaojiuchen]

@sorrycc

[miaojiuchen]

如果顺序颠倒过来用的话，那这个例子https://ant.design/components/form/#components-form-demo-form-in-modal
里的那个saveFormRef里获取到的form就是dva包裹的组件，然后handleOk里的form参数就获取不到对应的表单api

[grunmin]

我用export default connect(mapStateToProps)(Form.create({})(App))没有问题

[nikogu]

@miaojiuchen form.create({})(connect(mapStateToProps)(App))

[miaojiuchen]

@nikogu 你看下我例子里就是这么用的，回调参数props拿不到dispatch

[miaojiuchen]

@grunmin connect 放外层 https://ant.design/components/form/#components-form-demo-form-in-modal 这个例子就拿不到form

[yesmeck]

@miaojiuchen connect 套外面，第三个参数设置 withRef: true，就可以用 getWrappedInstance() 去拿到 Form.create 的 Form，https://github.com/reactjs/react-redux/blob/4.x/docs/api.md#arguments 。

const Form = connect((...) => (...), null, null, { withRef: true })(Form.create({...}))(Form);

[yesmeck]

或者自己去保存一份 form 的引用。

class MyForm extends Component {
  componentDidMount() {
    const { saveFormRef, form } = this.props;
    saveFormRef(form);
  }

  render() {
    ...
  }
}

const MyForm = connect(...)(Form.create({...})(MyForm));

class App extends Component {
  saveFormRef = (form) => {
   this.form = form;
  }

  render() {
    return (
      <MyForm saveFormRef={this.saveFormRef} />
    );
  }
}

[miaojiuchen]

@yesmeck 谢谢！

[sorrycc]

看起来已经解决了？

[whiteblueblack]

@yesmeck hi，工作辛苦！这里有个问题，两个Modal包裹Form于一个页面，功能相近，所以操作一个form的确认事件会触发另一个form的确认事件，请问如何保存两份form的引用，但不会冲突呢？（是这个问题吗？希望解答！ 诚挚感谢！：））
依照官方案例创建了两个form，并分别命名，getFieldDecorator也注意更改了命名。（我这看不了效果，不过代码结构大概是这样的，见谅！）
https://codepen.io/whiteblueya/pen/NajpQQ?editors=0010

[miaojiuchen]

@yesmeck 你好打扰了，这个issue的解决方法现在报了一个deprecated，原来ref的方式会报warning

Warning: you should not userefon enhanced form, please usewrappedComponentRef

详情见：
https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140

[yesmeck]

@miaojiuchen 按提示来改即可

[miaojiuchen]

@whiteblueblack 你 saveFormRef 和 saveTheFormRef 里的this.form 分别改为 this.form1 和 this.form2

[miaojiuchen]

const XXXForm = () => { }

const FormWrappedComponent = Form.create()(XXXForm)

const ReduxConnectedComponent = connect(
  ({ xxx_namespace }) => ({ xxx_namespace }),
  // null, null, { withRef: true }
)(FormWrappedComponent)

class XXXContainer extends React.Component {
  componentDidMount() {
    console.log(this.xxxForm) // print null
  }
  render() {
    return (
      <ReduxConnectedComponent wrappedComponentRef={el => this.xxxForm = el} ></ReduxConnectedComponent>
    )
  }
}

上述代码中，挂载后打印的form instance为null，也就是说未能获取到form的引用

@yesmeck 应该怎样把 wrappedComponentRef 这个 prop 透过 redux connect 传递 给 FormWrappedComponent 呢？

[miaojiuchen]

我知道了，我应该在XXXForm中手动调用 wrappedComponentRef(this.props.form) 🙄