Ant Design表单验证不起作用,并且当组件来自从函数传递的状态时,输入值不会更新。
创始人
2024-11-07 05:30:40
0

问题描述: 在使用 Ant Design 表单验证时,发现验证不起作用,并且当组件来自函数传递的状态时,输入值不会更新。

解决方法:

  1. 确保已经正确引入了 Ant Design 的相关组件和样式。
  2. 确保表单组件被包裹在 Form 组件中,并且指定了 name 属性。
  3. 使用 getFieldDecorator 方法对表单组件进行装饰,以便进行表单验证。
  4. getFieldDecorator 方法中,可以通过传递 rules 属性定义验证规则,如 required: true 表示必填项。
  5. 在表单提交时,调用 validateFields 方法进行表单验证。在验证通过后,可以获取表单的值进行后续操作。
  6. 如果组件来自函数传递的状态,需要使用 setFieldsValue 方法手动设置表单的值。

下面是一个示例代码,演示了如何解决这个问题:

import React from 'react';
import { Form, Input, Button } from 'antd';

const MyForm = () => {
  const [name, setName] = React.useState('');

  const handleSubmit = e => {
    e.preventDefault();
    const { validateFields } = form;
    validateFields((errors, values) => {
      if (!errors) {
        console.log('Form values:', values);
      }
    });
  };

  // 使用 getFieldDecorator 对表单进行装饰
  const { getFieldDecorator } = form;

  return (
    
{getFieldDecorator('name', { rules: [{ required: true, message: 'Please enter a name!' }], initialValue: name, // 从函数传递的状态设置初始值 })( setName(e.target.value)} />)}
); }; const WrappedMyForm = Form.create()(MyForm); export default WrappedMyForm;

在上面的代码中,MyForm 组件是一个函数组件,使用 useState 来定义了一个 name 状态,同时使用 Form.create() 方法对 MyForm 进行装饰,将 form 对象传递给组件。

MyForm 组件中,使用 getFieldDecorator 方法对表单进行装饰,并通过传递 rules 属性设置了验证规则。在 Input 组件中,使用 onChange 事件来更新 name 状态的值。

在表单提交时,调用 validateFields 方法进行表单验证,并在验证通过后打印表单的值。如果组件来自函数传递的状态,需要在 getFieldDecorator 方法中通过 initialValue 属性设置初始值,并在状态变化时使用 setFieldsValue 方法手动更新表单的值。

希望以上解决方法对你有帮助。

相关内容

热门资讯

揭幕透视!pokemmo内置修... 揭幕透视!pokemmo内置修改器!确实真的是有辅助工具(详细教程)-哔哩哔哩1、进入到pokemm...
分享透视!epoker有透视吗... 分享透视!epoker有透视吗!都是有辅助工具(的确有挂)-哔哩哔哩epoker有透视吗是不是有人用...
解谜透视!红龙poker辅助器... 解谜透视!红龙poker辅助器免费观看!竟然真的有辅助教程(有挂猫腻)-哔哩哔哩1、完成红龙poke...
详细透视!德州圈脚本!总是是有... 详细透视!德州圈脚本!总是是有辅助app(真实有挂)-哔哩哔哩1、金币登录送、破产送、升级送、活动送...
有挂透视!德州局脚本!一贯一直... 有挂透视!德州局脚本!一贯一直总是有辅助教程(存在有挂)-哔哩哔哩德州局脚本能透视中分为三种模型:德...
关于透视!pokemmo脚本最... 您好,pokemmo脚本最新版这款游戏可以开挂的,确实是有挂的,需要了解加去威信【485275054...
有挂透视!哈糖大菠萝破解器!一... 有挂透视!哈糖大菠萝破解器!一贯一直都是有辅助神器(有挂教学)-哔哩哔哩1、哈糖大菠萝破解器破解器简...
了解透视!拱趴大菠萝挂哪里!果... 了解透视!拱趴大菠萝挂哪里!果然一直都是有辅助攻略(有挂细节)-哔哩哔哩1、很好的工具软件,可以解锁...
必备透视!扑克之星辅助!切实是... 必备透视!扑克之星辅助!切实是有辅助软件(有挂解惑)-哔哩哔哩一、扑克之星辅助游戏安装教程牌型概率发...
必备透视!sohoo竞技联盟辅... 必备透视!sohoo竞技联盟辅助器!总是是有辅助攻略(存在有挂)-哔哩哔哩1)sohoo竞技联盟辅助...