React Hooks Components pass props All In One
-
React Hooks 父子组件如何传递和获取 props
-
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, 禁止转载 ️,侵权必究⚠️!