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

本文介绍了如何在React中封装一个用于批量管理输入框的BatchInputNumber组件,详细阐述了需求背景、组件实现过程以及在实际项目中的调用方法。
摘要由CSDN通过智能技术生成
一、需求

在这里插入图片描述

二、组件封装

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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的弹窗组件示例: ```javascript import React, { useState } from "react"; const Modal = ({ title, content, onClose }) => { const [isOpen, setIsOpen] = useState(true); const handleModalClose = () => { setIsOpen(false); onClose(); }; return ( <div className={`modal ${isOpen ? "is-active" : ""}`}> <div className="modal-background" onClick={handleModalClose} /> <div className="modal-card"> <header className="modal-card-head"> <p className="modal-card-title">{title}</p> <button className="delete" aria-label="close" onClick={handleModalClose} /> </header> <section className="modal-card-body">{content}</section> </div> </div> ); }; export default Modal; ``` 这个弹窗组件包括一个标题和内容,可以通过设置 `isOpen` 属性来控制显示和隐藏。在关闭弹窗时,我们需要调用 `onClose` 回调函数来通知父组件。 使用方式: ```javascript import React, { useState } from "react"; import Modal from "./Modal"; const App = () => { const [isModalOpen, setIsModalOpen] = useState(false); const handleOpenModal = () => { setIsModalOpen(true); }; const handleCloseModal = () => { setIsModalOpen(false); }; return ( <div> <button onClick={handleOpenModal}>Open Modal</button> <Modal title="Modal Title" content="This is the content of the modal." onClose={handleCloseModal} isOpen={isModalOpen} /> </div> ); }; export default App; ``` 在这个例子中,我们在父组件中定义了一个 `handleOpenModal` 回调函数来打开弹窗,以及一个 `handleCloseModal` 回调函数来关闭弹窗。我们将这些回调函数传递给 `Modal` 组件,并通过 `isOpen` 属性来控制弹窗的显示和隐藏。 注意,这只是一个简单的示例,实际应用中可能需要更多的功能和自定义选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值