antd提交表单_antd4 form表单使用 布满荆棘的人生 2022-12-31 08:28 265阅读 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;
还没有评论,来说两句吧...