如何转换下面的代码以便调用
<div><Example/></div>
<div><Example/></div>
<div><Example/></div>
当我单击一个 Example 项目然后单击另一个项目时,之前打开的 Example
项目关闭了吗?目前,该项目只有在被点击时才会关闭,如果我点击另一个项目将保持打开状态。
function Example() {
const [open, setOpen] = useState(false);
return (
<>
<Button
onClick={() => setOpen(!open)}
aria-controls="example-collapse-text"
aria-expanded={open}
className="Collapse-Test"
data-open={open}
>
click
</Button>
<Collapse in={open}>
<div id="example-collapse-text">
Hidden Text
</div>
</Collapse>
</>
);
};
最佳答案
将状态提升到父组件,以便它可以控制当前选择和打开的内容。更新 Example
组件以获取 open
和 onClick
Prop 。
示例组件
interface IExample {
open: boolean;
onClick: () => void;
}
function Example({ open, onClick }: IExample) {
return (
<>
<Button
onClick={onClick}
aria-controls="example-collapse-text"
aria-expanded={open}
className="Collapse-Test"
data-open={open}
>
click
</Button>
<Collapse in={open}>
<div id="example-collapse-text">
Hidden Text
</div>
</Collapse>
</>
);
};
父组件
const [openId, setOpenId] = useState<number | null>(null);
const toggleHandler = (id: number) => () => {
// toggle closed if already open, otherwise set new open id
setOpenId(openId => openId === id ? null : id);
};
...
<div>
<Example open={openId === 1} onClick={toggleHandler(1)} />
</div>
<div>
<Example open={openId === 2} onClick={toggleHandler(2)} />
</div>
<div>
<Example open={openId === 3} onClick={toggleHandler(3)} />
</div>
关于javascript - React Bootstrap Collapse 任何时候只有一个项目折叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74160415/