• React Hooks Components pass props All In One


    React Hooks Components pass props All In One

    1. React Hooks 父子组件如何传递和获取 props

    2. React Hooks 父子组件如何相互调用方法

    import React, {
        useState,
        useEffect,
        useRef,
    } from 'react';
    
    import {
        Input,
        Button,
    } from 'antd';
    
    interface searchProps {
        maxLength: number;
        search: string,
        onSearchData: (a: any) => void;
        setSearch: (a: any) => void;
        onResetData: (a: any) => void;
    }
    
    const MonitorSearch = (props: searchProps) => {
        console.log('search props', props);
        const {
            search,
            onSearchData,
            setSearch,
            onResetData,
        } = props;
        const size = 'middle';
        return (
            <>
                <div className="monitor-search-box">
                    <Input.Search
                        className="monitor-search-item"
                        placeholder="请输入进行搜索"
                        value={search}
                        onSearch={onSearchData}
                        onPressEnter={onSearchData}
                        onChange={e => setSearch(e.target.value)}
                        style={{  300 }}
                    />
                    <div className="monitor-search-item">
                        <Button
                            type="default"
                            size={size}
                            className="monitor-search-btn"
                            onClick={onResetData}>
                            重置
                        </Button>
                        <Button
                            type="primary"
                            size={size}
                            className="monitor-search-btn"
                            onClick={onSearchData}>
                            查询
                        </Button>
                    </div>
                </div>
            </>
        );
    }
    
    export default MonitorSearch;
    
    

    demo

    function components & hooks as props

    import React from 'react';
    import { Modal } from 'antd';
    import {
        ExclamationCircleFilled,
    } from '@ant-design/icons';
    
    // import tagService from '@/services/tagService';
    
    function PersonnelModal (props) {
        const { showPersonnelModal, setShowPersonnelModal, originData, getData } = props;
    
        function handleCancel () {
            setShowPersonnelModal(false);
        }
    
        function handleConfirm () {
            // tagService.deleteTag({tag_id: originData.tag_id}).then(() => {
            //     getData();
            //     setShowPersonnelModal(false);
            // });
        }
    
        return (
            <Modal
                title="提示"
                visible={showPersonnelModal} forceRender
                onOk={handleConfirm} onCancel={handleCancel}
                okText="确认" cancelText="取消"
    
            >
                <div className='flex-normal'>
                    {/* icons */}
                    <ExclamationCircleFilled style={{color: '#E6A23C', fontSize: 18}}/>
                    <span className='p-l-10 lh18'>确认删除{originData?.name}?</span>
                </div>
    
            </Modal>
        );
    }
    
    export default PersonnelModal;
    
    

    refs



    ©xgqfrms 2012-2020

    www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

    原创文章,版权所有©️xgqfrms, 禁止转载 ️,侵权必究⚠️!


    xgqfrms
  • 相关阅读:
    zoj 3627 Treasure Hunt II (贪心)
    1028
    DB2数据库性能优化介绍
    Python之美[从菜鸟到高手]--深刻理解原类(metaclass)
    Java和C++中多态的实现方式
    汉语-词语-停留:百科
    汉语-词语-体会:百科
    汉语-词语-味道:百科
    笔记-生活-饮食:香料妙用
    汉语-词语-香料:百科
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/15542721.html
Copyright © 2020-2023  润新知