react,form表单的封装

原创已于 2022-07-02 22:53:53 修改 · 664 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js

于 2022-06-18 23:40:00 首次发布

React 同时被 3 个专栏收录

12 篇文章

订阅专栏

antd

8 篇文章

订阅专栏

Date

3 篇文章

订阅专栏

这篇博客展示了React中父子组件之间的通信以及表单处理的实现。通过FormSearch组件，详细阐述了如何使用Ant Design的Form、Select和DatePicker组件创建表单，包括设置验证规则、初始化数据、提交表单及重置表单的功能。同时，文章还涉及了从父组件传递数据到子组件，并在子组件中完成业务逻辑处理的过程。

1、父组件

const bussLabel = [{
  label: "业务模块",
  name: "bussCode"
}, {
  label: "业务类型",
  name: "bussType"
}]

const bussProps = [{
  label: "typeName",
  name: "typeType"
}, {
  label: "codeName",
  name: "codeType"
}]

   <FormSearchDemo bussLabel={bussLabel} bussProps={bussProps} />

2、子组件

import { Button, Form, Select, DatePicker } from 'antd';
import React, { Fragment } from 'react';
import moment from 'moment';
const { Option } = Select;
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};

const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

class FormSearch extends React.Component {
    formRef = React.createRef();
    constructor() {
        super()
        this.state = {
            paramObj: {},
            bussList: [],
            typeList: [],
        }
    }

    componentDidMount() {
        const bussList = [{ typeName: 'xiaochen12', typeType: 12 }, { typeName: 'xiaochen13', typeType: 13 }];
        const typeList = [{ codeName: 'xiaotang14', codeType: 14 }, { codeName: 'xiaochen15', codeType: 15 }];
        this.setState({
            bussList,
            typeList
        });
        console.log('componentDidMount');
    }

    onFinish = (values) => {
        this.setState({
            paramObj: { ...values, month: moment(values.month).format('YYYY-MM') }
        }, () => {
            console.log('paramObj====', this.state.paramObj)
           // 同 过这里可以调用父组件的方法，把表单的值传到父组件。
        })
    }

    onReset = () => {
        this.formRef.current.resetFields();
    };

    render() {
        const { bussList, typeList } = this.state;
        const { bussLabel, bussProps } = this.props;
        // const [bussList, typeList] = column;
        const [buss, type] = bussLabel;
        const [props1, props2] = bussProps;
        console.log('bussList');
        // console.count();
        return (
            <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
                <Form.Item
                    name={buss.name}
                    label={buss.label}
                    rules={[
                        {
                            required: true,
                        },
                    ]}>
                    <Select
                        placeholder={"请选择" + buss.label}
                        allowClear
                    >
                        {bussList.map((item) => {
                            return <Option key={item[props1.label]} value={item[props1.name]}>{item[props1.label]}</Option>
                        })}
                    </Select>
                </Form.Item>
                <Form.Item
                    name={type.name}
                    label={type.label}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select
                        placeholder={"请选择" + type.label}
                        allowClear
                    >
                        {typeList.map((item) => {
                            return <Option key={item[props2.label]} value={item[props2.name]}>{item[props2.label]}</Option>
                        })}
                    </Select>
                </Form.Item>
                <Form.Item label="日期" name="month"
                    rules={[
                        {
                            required: true,
                        },
                    ]}>
                    <DatePicker picker="month" format="YYYY-MM" />
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                    <Button htmlType="button" onClick={this.onReset}>
                        Reset
                    </Button>
                </Form.Item>
            </Form>
        );
    }
}

export default FormSearch;