adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
55 lines (49 loc) • 1.15 kB
Markdown
---
order: 0
title:
zh-CN: 内部驱动
en-US: Type
---
展开/收起表单信息：
```jsx
const [data, setData] = useState({
名称: "微信广告助手",
城市: "深圳市",
性别: "男",
电子邮箱: "donon@gmail.com",
})
const handleClick = (expanded) => {
const dataNew = { ...data }
if (expanded) {
delete dataNew["职业"]
delete dataNew["特长"]
} else {
dataNew["职业"] = "视觉设计师"
dataNew["特长"] = "Brawl Stars"
}
setData(dataNew)
}
const expanded = Object.keys(data).length > 4
return (
<Form
itemClassName="mb-12 text-13 text-tp-gray-800"
labelClassName="mr-16"
labelSize={4}
>
<Motion transition="zoom">
{Object.keys(data).map((key) => (
<Form.Item key={key} label={key}>
{data[key]}
</Form.Item>
))}
</Motion>
<div
onClick={() => handleClick(expanded)}
className="flex items-center text-13 text-blue font-medium cursor-pointer"
>
{expanded ? "收起" : "展开全部信息"}
<Icon icon={`arrow-${expanded ? "up" : "down"}`} color="var(--ad-blue)" />
</div>
</Form>
)
```