买网站需要注意什么,wordpress 音乐,前端开发常用网站,上海保洁服务网站建设目录 一、背景二、具体1. 模式一#xff1a;点击确认进行校验提示2. 模式二#xff1a;确认按钮依赖于表单内容实现说明 一、背景
基于react、antd form分别实现如下两种模式#xff1a;
1、一个 Modal#xff0c;点击确认进行校验提示2、一个 Modal#xff0c;确认按钮… 目录 一、背景二、具体1. 模式一点击确认进行校验提示2. 模式二确认按钮依赖于表单内容实现说明 一、背景
基于react、antd form分别实现如下两种模式
1、一个 Modal点击确认进行校验提示2、一个 Modal确认按钮依赖于表单内容必填项都有值才可点击
二、具体
以下是基于 React 和 Ant Design 的两种模式实现
1. 模式一点击确认进行校验提示
import React, { useState } from react;
import { Modal, Form, Input, Button, message } from antd;const DialogWithValidation () {const [visible, setVisible] useState(false);const [form] Form.useForm();const handleOk () {form.validateFields().then(() {message.success(校验通过提交成功);setVisible(false);form.resetFields();}).catch((errorInfo) {message.error(校验未通过请检查输入);});};return (Button typeprimary onClick{() setVisible(true)}打开对话框/ButtonModaltitle模式一校验提示visible{visible}onCancel{() setVisible(false)}onOk{handleOk}okText确认cancelText取消Form form{form} layoutverticalForm.Itemlabel姓名namenamerules{[{ required: true, message: 请输入姓名 }]}Input placeholder请输入姓名 //Form.ItemForm.Itemlabel邮箱nameemailrules{[{ required: true, message: 请输入邮箱 },{ type: email, message: 请输入有效的邮箱地址 },]}Input placeholder请输入邮箱 //Form.Item/Form/Modal/);
};export default DialogWithValidation;2. 模式二确认按钮依赖于表单内容
可以参考 Antd form - 仅校验 例子。主要是利用 validateFields 的 validateOnly 动态调整提交按钮的 disabled 状态
const SubmitButton: React.FCReact.PropsWithChildrenSubmitButtonProps ({ form, children }) {const [submittable, setSubmittable] React.useStateboolean(false);// Watch all valuesconst values Form.useWatch([], form);React.useEffect(() {form.validateFields({ validateOnly: true }).then(() setSubmittable(true)).catch(() setSubmittable(false));}, [form, values]);return (Button typeprimary htmlTypesubmit disabled{!submittable}{children}/Button);
};也可以监听 onFieldsChange
import React, { useState } from react;
import { Modal, Form, Input, Button } from antd;const DialogWithDisableButton () {const [visible, setVisible] useState(false);const [isFormValid, setIsFormValid] useState(false);const [form] Form.useForm();const handleFieldsChange () {form.validateFields().then(() {setIsFormValid(true);}).catch(() {setIsFormValid(false);});};const handleOk () {Modal.success({title: 提交成功,content: 所有必填项都已填写,});setVisible(false);form.resetFields();setIsFormValid(false);};return (Button typeprimary onClick{() setVisible(true)}打开对话框/ButtonModaltitle模式二按钮依赖表单visible{visible}onCancel{() setVisible(false)}onOk{handleOk}okButtonProps{{ disabled: !isFormValid }}okText确认cancelText取消Formform{form}layoutverticalonFieldsChange{handleFieldsChange}Form.Itemlabel姓名namenamerules{[{ required: true, message: 请输入姓名 }]}Input placeholder请输入姓名 //Form.ItemForm.Itemlabel邮箱nameemailrules{[{ required: true, message: 请输入邮箱 },{ type: email, message: 请输入有效的邮箱地址 },]}Input placeholder请输入邮箱 //Form.Item/Form/Modal/);
};export default DialogWithDisableButton;实现说明 模式一 点击“确认”后会触发校验逻辑。校验通过后显示成功提示否则提示错误信息。 模式二 使用 onFieldsChange 方法监听表单变化。如果所有必填项都有值且校验通过启用“确认”按钮否则按钮保持禁用状态。