a7242f0c69
- 包含4个产业方向的前端项目：智能开发、智能制造、大健康、财经商贸 - 已清理node_modules、.yoyo等大文件，项目大小从2.6GB优化至631MB - 配置完善的.gitignore文件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
88 lines
2.9 KiB
HTML
88 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test Controlled Collapse</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/@arco-design/web-react@2.60.0/dist/css/arco.css">
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
|
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
<script src="https://unpkg.com/@arco-design/web-react@2.60.0/dist/arco.min.js"></script>
|
|
|
|
<script type="text/babel">
|
|
const { useState, useEffect } = React;
|
|
const { Collapse, Button } = arco;
|
|
const CollapseItem = Collapse.Item;
|
|
|
|
function App() {
|
|
const [activeKeys, setActiveKeys] = useState([]);
|
|
|
|
const handleChange = (keys, extra) => {
|
|
console.log('onChange received:', keys, 'type:', typeof keys, 'extra:', extra);
|
|
|
|
// Log the current state
|
|
console.log('Current activeKeys before update:', activeKeys);
|
|
|
|
// Arco Design Collapse in controlled mode always returns an array
|
|
// But we need to handle it properly
|
|
setActiveKeys(keys || []);
|
|
|
|
console.log('New activeKeys to be set:', keys);
|
|
};
|
|
|
|
const programmaticallyOpen = (key) => {
|
|
console.log('Programmatically opening:', key);
|
|
setActiveKeys(prev => {
|
|
if (!prev.includes(key)) {
|
|
return [...prev, key];
|
|
}
|
|
return prev;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: 20 }}>
|
|
<h2>Test Controlled Collapse</h2>
|
|
<p>Active Keys: {JSON.stringify(activeKeys)}</p>
|
|
|
|
<div style={{ marginBottom: 20 }}>
|
|
<Button onClick={() => programmaticallyOpen('1')} style={{ marginRight: 10 }}>
|
|
Open Panel 1
|
|
</Button>
|
|
<Button onClick={() => programmaticallyOpen('2')} style={{ marginRight: 10 }}>
|
|
Open Panel 2
|
|
</Button>
|
|
<Button onClick={() => programmaticallyOpen('vertical-1')} style={{ marginRight: 10 }}>
|
|
Open Panel 3
|
|
</Button>
|
|
<Button onClick={() => setActiveKeys([])}>
|
|
Close All
|
|
</Button>
|
|
</div>
|
|
|
|
<Collapse
|
|
activeKey={activeKeys}
|
|
onChange={handleChange}
|
|
expandIconPosition="right"
|
|
>
|
|
<CollapseItem header="Panel 1" name="1">
|
|
Content 1
|
|
</CollapseItem>
|
|
<CollapseItem header="Panel 2" name="2">
|
|
Content 2
|
|
</CollapseItem>
|
|
<CollapseItem header="Panel 3 (vertical)" name="vertical-1">
|
|
Content 3
|
|
</CollapseItem>
|
|
</Collapse>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(<App />, document.getElementById('root'));
|
|
</script>
|
|
</body>
|
|
</html> |