useModelForm spec

[ant-design]

useModelForm spec

[starandtina]

有一点讨论一下下，我建议使用 getModalProps 和 getFormProps 函数去获取对应的 props，因为函数会更加灵活，可以加入自定义处理逻辑，比如 getFormProps(props)，根据不同的 props 可能会有不同的返回。

[JIACHENG9]

没有太明白需求呢？要是想用 props 可：

 import { Modal, Form } from 'antd';
import { useModalForm } from 'sunflower-antd';

function Component(props) {
  const { modalProps, formProps, show, close, visible } = useModal({
    defaultVisible: false, 
    autoSubmitClose: true,
    async submit() {},
  })
  return <>
      <Modal okText="submit" {...modalProps} {...props}>
        <Form {...formProps} />
      </Modal>
       
       modal visible: {visible}
       <a onClick={() => show()}>show modal</a>
       <a onClick={() => close()}>close modal</a>
  </>
}

export default Component;

[starandtina]

我是有遇到过一个问题，如下所示，

function App(props) {
  const { modalProps, formProps, show, close, visible } = useModal({})
  return <>
      <Modal okText="submit" onOk={props.onOk} {...modalProps} >
        <Form {...formProps} />
      </Modal>
  </>
}

如果，modalProps 也包含 onOk 事件处理器，那么 modalProps 会覆盖掉你的自定义的 onOk 事件处理器，就算把 modalProps 放到 onOk 前面，也会相互覆盖。如果我们是用 getModalProps 去获取 Modal 相关的 props，那么我们可以这样做，

getModalProps: props => ({
  ...,
  onOk: args => [props.onOk, this.onOk].forEach(fn => fn && fn(...args))
})

[JIACHENG9]

看看是否这样就行：

function App(props) {
  const { modalProps, formProps, show, close, visible } = useModal({})
  return <>
      <Modal okText="submit"  {...modalProps} onOk={() => {
        props.onOk();
        modalProps.onOk();
      }}>
        <Form {...formProps} />
      </Modal>
  </>
}

[Mr-zyy]

useModalForm 是否要再传一个onOK函数 支持用户点击提交时做一些额外操作

function App(props) {
  const { modalProps, formProps, show, close, visible } = useModalForm({
      onOK: props.onOk,
  })
  return <>
      <Modal okText="submit"  {...modalProps} >
        <Form {...formProps} />
      </Modal>
  </>
}

[JIACHENG9]

#56