antd提交表单_antd4 form表单使用

布满荆棘的人生 2022-12-31 08:28 306阅读 0赞

antd4.x form使用实例：

// AntdForm4.js class组件形式

import React, \{ Component, useEffect \} from "react";

import \{ Form, Input, Button \} from "antd";

const FormItem = Form.Item;

const nameRules = \{ required: true, message: "请输入姓名" \};

const passwordRules = \{ required: true, message: "请输入密码" \};

export default class AntdFormPage extends Component \{

formRef = React.createRef();

componentDidMount() \{

this.formRef.current.setFieldsValue(\{ name: "default name" \});

\}

onReset = () => \{

this.formRef.current.resetFields();

\};

onFinish = (val) => \{

console.log("onfinish", val);

\};

onFinishFailed = (val) => \{

console.log("onfinishfailed", val);

\};

render() \{

console.log("antd render", this.formRef.current);

return (

ref=\{this.formRef\}

onFinish=\{this.onFinish\}

onFinishFailed=\{this.onFinishFailed\}

onReset=\{this.onReset\}

>

submit

reset

);

\}

\}

// AntdForm4.js function组件形式

import React, \{ Component, useEffect \} from "react";

import \{ Form, Input, Button \} from "antd";

const FormItem = Form.Item;

const nameRules = \{ required: true, message: "姓名" \};

const passwordRules = \{ required: true, message: "Mim " \};

export default function AntdFormPage(props) \{

const \[form\] = Form.useForm();

const onFinish = (val) => \{

console.log("onfinish", val);

\};

const onFinishFailed = (val) => \{

console.log("onFinishFailed", val);

\};

useEffect(() => \{

console.log("form", form);

form.setFieldsValue(\{ name: "default name" \});

\}, \[\]);

return (

### AntdFormPage ###

submit

);

\}

// App.js

import React from "react";

import AntdFormPage from "./pages/AntdForm4.js";

function App() \{

return (

);

\}

export default App;

发表评论取消回复

表情：

评论列表（有 0 条评论，306人围观）

还没有评论，来说两句吧...

相关阅读

相关 antd获取/更改form表单数据（表单域数据）

创建ref引用 formRef = React.createRef(); 表单和ref绑定 //ref={this.formRef} 先给For

今天药忘吃喽~/ 2024年02月21日 10:08/ 0 赞/ 56 阅读

相关 antd动态新增表单

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2023年01月14日 01:37/ 0 赞/ 303 阅读

相关 antd提交表单_请问下antd的form表单如何在form表单外部调用form的submit事件?

1.先在有一个需求用steps步骤条在第一部让用户输入数据后,点击from外面的Button你能够获取到form表单中的值进行提交. 2. ![Image 1][] 3.

矫情吗；*/ 2023年01月08日 07:25/ 0 赞/ 292 阅读

相关 antd提交表单_antd4 form表单使用

antd4.x form使用实例： // AntdForm4.js class组件形式 import React, \{ Component, useEffect \} f

布满荆棘的人生/ 2022年12月31日 08:28/ 0 赞/ 307 阅读

相关 antd form表单验证，表单初始值

form.setFieldsValue(initialValues);实现设置初始默认值 form.validateFields()实现对输入的值进行验证完整代码如下：

古城微笑少年丶/ 2022年11月16日 13:42/ 0 赞/ 451 阅读

相关 react antd form 表单清空

关于react\_antd\_desgin的学习这两天也是获取到的知识零零散散，大多在网上也能获取的到，所以隔了很长的时间，没有编写关于react相关的文章。今天之所以写也是因

深藏阁楼爱情的钟/ 2022年08月28日 13:47/ 0 赞/ 264 阅读

相关 Form表单提交

1. JS源码提交： var form = document.getElementById('AddZookeeperForm'); form

深藏阁楼爱情的钟/ 2022年07月15日 01:42/ 0 赞/ 353 阅读

相关 Form表单提交

1. JS源码提交： var form = document.getElementById('AddZookeeperForm'); form

谁借莪１个温暖的怀抱￠/ 2022年07月15日 01:42/ 0 赞/ 373 阅读

相关 react中使用AntD表单

react中使用AntD表单 1.双向数据绑定 render() { const { getFieldDecorator } = thi

àì夳堔傛蜴生んèń/ 2022年01月25日 18:13/ 0 赞/ 438 阅读

相关 antd Form表单

(1)自定义Form-item内容自定义的组件需要传递value和onChange参数,通过这两个参数和外面的Form联动自定义组件:

逃离我推掉我的手/ 2021年07月24日 21:24/ 0 赞/ 488 阅读