Ant design获取form表单中数据

最新推荐文章于 2024-08-24 11:02:35 发布

原创最新推荐文章于 2024-08-24 11:02:35 发布 · 1.4w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ant #from获取数据

本文介绍如何在Ant Design的Form表单中利用getFieldDecorator属性来获取表单字段的值，例如通过此方法可以获取到departmentNum字段的选定值，如'开发'或'测试'，并设置initialValue为默认选定值。

在From表单中获取数据需要依靠 getFieldDecorator 属性，获取对应参数下的值，例如

{getFieldDecorator('departmentNum', {
                  initialValue: "开发"
                })(
                  <Select placeholder="选择">
                    <Option value="开发">开发</Option>
                    <Option value="测试">测试</Option>
                  </Select>
                )}

getFieldDecorator可以获取departmentNum下选定的值开发或者测试，initialValue为默认选定值。

import React from 'react';
import { Form, Row, Col, Select, Button } from 'antd';

const { Option } = Select;

@Form.create()

class Forms extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.query()
  }

  //点击查询
  query = (page) => {

    let typeName = this.props.form.getFieldsValue().typeName;
    let departmentNum = this.props.form.getFieldsValue().departmentNum;

    //时间转换
    let data = {
      departmentNum: departmentNum,
      typeName: typeName
    }
    if (page) {
      data = { ...data, ...page }
    }
    console.log(data, "传递参数");
    
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Form style={{ backgroundColor: "#fff", paddingTop: "30px", marginTop: "20px" }}>
          <Row>
            <Col span={5}>
              <Form.Item label="部门">
                {getFieldDecorator('departmentNum', {
                  initialValue: "开发"
                })(
                  <Select placeholder="选择">
                    <Option value="开发">开发</Option>
                    <Option value="测试">测试</Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={5}>
              <Form.Item label="报告类型">
                {getFieldDecorator('typeName', {
                  initialValue: "汇总"
                })(
                  <Select placeholder="报告类型">
                     <Option value="汇总">汇总</Option>
                     <Option value="分布">分布</Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={1} offset={1} style={{ marginTop: "3px" }}>
              <Button type="primary" onClick={() => this.query()}>查询</Button>
            </Col>
            
          </Row>
        </Form>
      </div>
    )
  }
}
export default Forms;