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, 禁止转载 ️，侵权必究⚠️！

---