zent/src/select/demos/12.render-collapsed-content.md

一套前端设计语言和基于React的实现

---
order: 12
zh-CN:
	title: 自定义折叠 tags 的浮层内容展示
	placeholder: 选择多项
en-US:
	title: Customize the Pop content of collapsed tags
	placeholder: Select some options..
---

```js
import { useState, useCallback } from 'react';
import { Select, Checkbox } from 'zent';

const options = [
	{
		key: '1',
		text: 'Option 1',
	},
	{
		key: '2',
		text: 'Option 2',
	},
	{
		key: '3',
		text: 'Option 3',
	},
	{
		key: '4',
		text: 'Option 4',
	},
	{
		key: '5',
		text: 'Option 5',
	},
];

function CustomizeCollapsedContentRender() {
	const [value, onChange] = useState(options);
	const [customizeCollapsedContent, setCustomizeCollapsedContent] = useState(false);

	const handleCheckboxChange = useCallback((e) => {
		setCustomizeCollapsedContent(e.target.checked);
	});

	const renderCollapsedContent = useCallback((collapsedValue) => {
		return <>{collapsedValue.map(({key, text}) => (<p>{text}</p>))}</>;
	}, [])

	return (
		<div className="zent-demo-select-multiple-customize-collapsed">
			<Select
				multiple
				options={options}
				placeholder="{i18n.placeholder}"
				value={value}
				onChange={onChange}
				collapsable
				collapseAt={1}
				clearable
				renderCollapsedContent={customizeCollapsedContent ? renderCollapsedContent : undefined}
			/>
			<Checkbox checked={customizeCollapsedContent} onChange={handleCheckboxChange}>{i18n.title}</Checkbox>
		</div>
	);
}

ReactDOM.render(<CustomizeCollapsedContentRender />, mountNode);
```

<style>
	.zent-demo-select-multiple {
		&-customize-collapsed {
			display: flex;
			align-items: center;

			.zent-checkbox {
				margin-left: 16px;
			}
		}
	}
</style>