73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
||
import { InfiniteList } from '@zhst/biz'
|
||
import { Button, Input, Space } from 'antd'
|
||
|
||
interface IData { name: string; age?: number; sex: string; tel: number }
|
||
|
||
export default () => {
|
||
const [data, setData] = useState<any>([])
|
||
const [loading, setLoading] = useState(false)
|
||
const [params, setParams] = useState<IData>({
|
||
name: '',
|
||
tel: 123,
|
||
age: 12,
|
||
sex: '男'
|
||
})
|
||
|
||
const loadMoreData = (params?: IData) => {
|
||
if (loading) {
|
||
return;
|
||
}
|
||
setLoading(true);
|
||
fetch('https://randomuser.me/api/?results=10&inc=id,key,name,gender,email,nat,picture&noinfo', {
|
||
})
|
||
.then((res) => res.json())
|
||
.then((body) => {
|
||
setData([...data, ...body.results]);
|
||
setLoading(false);
|
||
})
|
||
.catch(() => {
|
||
setLoading(false);
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadMoreData();
|
||
}, []);
|
||
|
||
return (
|
||
<Space direction='vertical'>
|
||
<Space>
|
||
<Input placeholder='名称' onChange={(e) => setParams(pre => ({ ...pre, name: e.target.value }))} style={{ width: '120px' }} />
|
||
<Input placeholder='年龄' onChange={(e) => setParams(pre => ({ ...pre, age: Number(e.target.value) }))} style={{ width: '120px' }} />
|
||
<Input placeholder='性别' onChange={(e) => setParams(pre => ({ ...pre, sex: e.target.value }))} style={{ width: '120px' }} />
|
||
<Input placeholder='手机号' onChange={(e) => setParams(pre => ({ ...pre, tel: Number(e.target.value) }))} style={{ width: '120px' }} />
|
||
<Button onClick={() => loadMoreData(params)}>加载更多</Button>
|
||
</Space>
|
||
<InfiniteList
|
||
loading={loading}
|
||
loadMore={() => loadMoreData(params)}
|
||
height={300}
|
||
hasMore={data.length < 100}
|
||
data={data}
|
||
type="custom"
|
||
loadingMessage={<Button onClick={() => loadMoreData(params)}>加载更多</Button>}
|
||
itemRender={() => {
|
||
return (
|
||
<div
|
||
style={{
|
||
width: '200px',
|
||
height: '100px',
|
||
border: '1px solid #000',
|
||
boxSizing: 'border-box'
|
||
}}>
|
||
自定义的子元素
|
||
</div>
|
||
)
|
||
}}
|
||
onItemClick={data => console.log('item点击：', data)}
|
||
/>
|
||
</Space>
|
||
)
|
||
}
|