简单的弹出确认框

效果图

1）弹出框用antd里的Modal组件

 <Modal
          title="创建角色"
          visible={isShowAdd}
          onOk={this.addRole}
          onCancel={() => {
            this.setState({ isShowAdd: false });
          }}
        >
        <AddForm setForm={form => { this.form = form;}}
          ></AddForm>
</Modal>

2）在状态里定义isShowAdd

 state = {
    isShowAdd: false, //标识确认框的显示 隐藏 添加角色
  };

3)点击确认时绑定的函数

在点击确认时，会先对你填写的表单内容进行表单验证，如果通过了分3步🙎‍♀️：

1. 收集用户输入的数据
2. 发请求
3. 隐藏对话框

  addRole = () => {
    //先进行表单验证
    this.form.validateFields(async (error, values) => {
      if (!error) {
        //1)收集输入数据
        const { roleName } = values;
        //1.1)清除表单数据
        this.form.resetFields();
        //2)发请求
        const result = await reqAddRole(roleName);
        if (result.status === 0) {
          message.success("添加角色成功，柚子真不错");
          // this.getRoles()//重新获取角色列表
          const role = result.data; //新产生的角色
          // const roles = this.state.roles//取出数组
          // roles.push(role)//往数组里添加一个元素
          // this.setState({roles})
          //优化更新roles状态：基于原本状态数据更新
          this.setState(state => ({
            roles: [...state.roles, role]
          }));
        } else {
          message.error("咋回事类-添加角色失败");
        }
        //隐藏对话框
        this.setState({ isShowAdd: false });
      } else {
        message.error("请输入角色名称");
      }
    });
  };

4）给按钮绑定点击函数，才能弹出确认框呀

 <Button
          type="primary"
          onClick={() => {
            this.setState({ isShowAdd: true });
          }}
          style={{ marginRight: 10 }}
        >
         创建角色
        </Button>

5）确认框里的代码

确认框里的内容可以单独抽离出一个子组件来写，eg:AddForm组件

6）涉及子传父

因为你在子组件AddForm里写的弹出框的代码，用户输入的一系列属性都在form里，你需要将form传到父组件

注意：子组件之所以写成了高阶组件，是因为只有高阶组件才能获取到表单form

回忆子传父：在父组件定义方法，子组件调用此方法传过去

1. 父组件里定义了setForm方法

 <AddForm  setForm={form => {} } ></AddForm>

2. 子组件调用这个方法
   3.父组件将传过来的form保存到自身上

  <AddForm setForm={form => {this.form = form; }}></AddForm>