antd4.0模态框获取form表单的提交数据内容

最新推荐文章于 2024-03-08 17:05:18 发布

#做一个清醒的人

最新推荐文章于 2024-03-08 17:05:18 发布

阅读量4.9k

点赞数 6

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/rock_23/article/details/107667607

版权

React 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

antd4.0模态框获取form表单的提交数据内容

要想那到值，其实和antd4版本以前拿数据是差不多的。

因为antd3以前拿数据(有段时间不用3版本了，只记得大概，简要写一下，不一定就没错)：
const { getFieldDecorator } = this.props.form;

onOkHandler = () => {
// 3版本拿antd中表单的数据
	this.props.form.validateFields((err, values) => {
	      if(!err){
	        console.log(values);//这里可以拿到数据
	      }
    });
}
const { getFieldDecorator } = this.props.form;
<Form className="login-form">
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
          )}
        </FormItem>
      </Form>

antd4版本：

import { Modal, Form } form "antd";
	const Index = props => {
		const [form] = Form.useForm();
	const handleOk = (e) => {//点击对话框OK按钮触发的事件
		console.log(form);
		// 获取form的值
		console.log(form.getFieldsValue());
		form.getFieldsValue();
	}
	return <>
	<Modal
        title={props.isEditUser ?
            "编辑用户" :
            "新建用户"}
        visible={props.createUserModalVisible}
        destroyOnClose={true}
        onCancel={onCancel}
        onOk={onOk}
        okText={"保存"}
    >
        <Form
        **// 要有form属性，也方便清空表单内的**
            form={form}
            name={"createUserModal"}
            {...formItemLayout}
            className={"normalForm"}
        >
            <FormItem label={"用户名"} name={"userName"} rules={[
                {
                    required: true,
                    message: "请输入用户名"
                }
            ]} colon={false}>
                <Input/>
            </FormItem>
            <FormItem label={"手机号"} name={"phone"} rules={[
                {
                    required: true,
                    message: "请输入手机号"
                }
            ]} colon={false}>
                <Input/>
            </FormItem>
            <FormItem label={"邮箱"} name={"email"} rules={[
                {
                    required: true,
                    message: "请输入邮箱"
                }
            ]} colon={false}>
                <Input/>
            </FormItem>
            <FormItem label={"姓名"} colon={false} name={"fullName"}>
                <Input/>
            </FormItem>
            <FormItem label={"角色"} colon={false} name={"js"} rules={[
                {
                    required: true,
                    message: "请选择角色"
                }
            ]}>
                <Select suffixIcon={<Icon type={"icongeneraliconyiru"}/>}>
                    <Option value={"老师"}>老师</Option>
                    <Option value={"学生"}>学生</Option>
                </Select>
            </FormItem>
            <FormItem label={"学/工号"} colon={false} name={"num"}>
                <Input/>
            </FormItem>
            <FormItem label={"组织架构"} colon={false} name={"org"}>
                <Select suffixIcon={<Icon type={"icongeneraliconyiru"}/>}>
                    <Option value={"11"}>11</Option>
                    <Option value={"22"}>22</Option>
                </Select>
            </FormItem>
        </Form>
    </Modal>;
</>
}