react项目实战学习笔记-学习45-对话框获取表单的值

简介: react项目实战学习笔记-学习45-对话框获取表单的值
// 对话框点击了提交
  const handleOk = () => {
    form
      .validateFields()    // validate校验   field字段
      .then((values) => {
        //  form.resetFields();   // reset重置
        let { title, subTitle } = values;
        // 地址栏有id代表现在想要更新一篇文章
        if (params.id) {
          // 更新文章的请求
          ArticleUpdateApi({ title, subTitle, content, id: params.id }).then(res => dealData(res.errCode, res.message))
        } else {
          // 添加文章的请求
          ArticleAddApi({ title, subTitle, content }).then(res => dealData(res.errCode, res.message))
        }
      })
      .catch(() => false);
  };

image.png

相关文章
|
1月前
|
前端开发 UED 开发者
React 模态对话框 Modal Dialog
本文介绍如何在 React 中实现模态对话框,涵盖基本概念、常见问题及解决方案。模态对话框是一种阻止用户与页面其他部分交互的弹出窗口,常用于显示重要信息或收集输入。通过状态管理控制其显示和隐藏,需注意多组件状态同步、关闭行为一致性及样式冲突等问题。文中还介绍了动画效果和键盘导航支持等进阶功能,帮助开发者提升用户体验并确保代码的可维护性。
116 80
|
4月前
|
移动开发 前端开发 JavaScript
React 表单与事件
10月更文挑战第10天
60 1
|
2月前
|
前端开发 UED 开发者
React 对话框组件 Dialog
本文详细介绍了如何在 React 中实现一个功能完备的对话框组件(Dialog),包括基本用法、常见问题及其解决方案,并通过代码案例进行说明。从安装依赖到创建组件、添加样式,再到解决关闭按钮失效、背景点击无效、键盘导航等问题,最后还介绍了如何添加动画效果和处理异步关闭操作。希望本文能帮助你在实际开发中更高效地使用 React 对话框组件。
157 75
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
深入探索研究React表单
【10月更文挑战第6天】
100 57
|
2月前
|
存储 前端开发 JavaScript
React 表单输入组件 Input:常见问题、易错点及解决方案
本文介绍了在 React 中使用表单输入组件 `Input` 的基础概念,包括受控组件与非受控组件的区别及其优势。通过具体代码案例,详细探讨了创建受控组件、处理多个输入字段、输入验证和格式化的方法,并指出了常见易错点及避免方法,旨在提升表单的健壮性和用户体验。
64 4
|
3月前
|
前端开发 JavaScript
React 表单处理技巧
【10月更文挑战第24天】本文从初学者角度出发,详细介绍了 React 中表单处理的基本概念、常见问题及解决方案。涵盖受控组件与非受控组件的区别、状态更新、表单验证、多字段管理及高级技巧,通过代码示例帮助读者更好地理解和应用。
126 7
|
4月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
137 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
4月前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
82 0
|
5月前
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子
|
6月前
|
容器 Kubernetes Docker
云原生JSF:在Kubernetes的星辰大海中,让JSF应用乘风破浪!
【8月更文挑战第31天】在本指南中,您将学会如何在Kubernetes上部署JavaServer Faces (JSF)应用,享受容器化带来的灵活性与可扩展性。文章详细介绍了从构建Docker镜像到配置Kubernetes部署全流程,涵盖Dockerfile编写、Kubernetes资源配置及应用验证。通过这些步骤,您的JSF应用将充分利用Kubernetes的优势,实现自动化管理和高效运行,开启Java Web开发的新篇章。
67 0