在 react-bootstrap 中的元素上启动单击事件

Question

Using querySelectorAll 搜索具有类.collapse的项目。他向我展示了三个要素。然后循环访问这三个元素并查找具有.show类的元素。当他使用console.log (el.children [0])时，他应该给我看一个元素，给我看几个。我想在第一个元素上启动点击事件el.children [0] .click ()

class App extends Component {
constructor() {
super();
}
closeCollapse = () => {
var x = document.querySelectorAll(".collapse");  
console.log(x); 
if(x.length){
for(var i=0; i<x.length; i++) { 
setTimeout(function () {
var el = document.querySelector(".show");  
console.log(el);     
el.children[0].click();  
}, 100);          
}
}
}
render() {
return (
<div>
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
<button className="button" onClick={this.closeCollapse}>Close</button>
</div>
);
}
}

.CSS

.collapse {
display: none !important;
}
.show {
display: block !important;
}

Answer 1

此处记录了单击处理程序。请注意，该示例使用 React Hooks 就像使用 Button 一样，但过程是相同的。

function Example() {
const [open, setOpen] = useState(false);
return (
<>
<Button
onClick={() => setOpen(!open)}
aria-controls="example-collapse-text"
aria-expanded={open}
>
click
</Button>
<Collapse in={open}>
<div id="example-collapse-text">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
</div>
</Collapse>
</>
);
}
render(<Example />);