与状态问题的 Antd 组件模态表单反应答案

【问题标题】：React with Antd Component Modal Form with state issue与状态问题的 Antd 组件模态表单反应
【发布时间】：2020-04-15 01:46:16
【问题描述】：

我不知道处理这个问题的正确方法是什么 -> 我是 React 的初学者，所以如果这看起来很荒谬，也许我弄错了。

我有一个 React 组件 - 这是一个包含任务列表的表格/列表


  showModal = () => {
    this.setState({
      visible: true,
    });
  };
.
render() {
return ( 
<Table />

        <Button type="primary" onClick={this.showModal}>
          Add New Task
        </Button>
<CRTaskForm
        visible={this.state.visible} />

我有另一个 React 组件 CRTaskForm - 它基本上是一个添加任务的模态表单

现在，我的问题是 1. 我想处理 CRTaskForm 中的 onSubmit - 并在创建任务时关闭表单 - CRTaskForm onSubmit(e) { .. } 中有一个单独的处理程序，它处理通过 REST 将创建任务发送到服务器。

如何在 onSubmit 中关闭 Modal 表单。CRTaskForm 中不存在“可见”道具。

【问题讨论】：

所以，在阅读了一些“更多”帖子之后，我能想到的是这样的 -> Parent - 包含 onShow 函数和 onHide 函数，onHide 函数作为道具传递给孩子（实际模态组件）。子 Modal 包含执行一些自定义处理的 onSubmit 函数。然后子 Modal 在 onsubmit 处理完成时调用 onHide。这是正确的做法吗？是否有一些我遗漏的用例？

标签： reactjs forms modal-dialog state antd

【解决方案1】：

我会创建一个函数来关闭模态并将其作为道具传递给表单：

closeModal = () => {
  this.setState({
   visible: false
})
}

...

<CRTaskForm visible={this.state.visible} closeModal={this.closeModal}/>

只需在提交函数中调用它。

【讨论】：