React封装多个输入框组件--BatchInputNumber组件

前端砖家^_^

于 2021-12-06 11:41:52 发布

阅读量627

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/html5_mylove/article/details/121743580

本文介绍了如何在React中封装一个用于批量管理输入框的BatchInputNumber组件，详细阐述了需求背景、组件实现过程以及在实际项目中的调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需求

在这里插入图片描述

二、组件封装

BatchInputNumber.js

import React, {
    PureComponent, Fragment } from 'react';
import moment from 'moment';
import {
    Form, Row, Col, InputNumber, Icon, Button, message } from 'antd';
import styles from './index.less';

const FormItem = Form.Item;
const formItemLayout = {
   
    labelCol: {
    span: 3 },
    wrapperCol: {
    span: 21 },
};

// 日期段组件
@Form.create()
export default class extends PureComponent {
   
    constructor(props) {
   
        super(props);
        this.state = {
   };
    }

    //变化
    onInputChange = (id, value) => {
   
        const {
    inputBar, dispatch, name, dispatchType } = this.props;
        let newInputBar = inputBar.map(item => {
   
            return item.id != id
                ? item
                : {
   
                    ...item,
                    inputValue: value
                };
        });
        dispatch({
   
            type

最低0.47元/天解锁文章