在react-bootstrap中的元素上啟動click事件

Question

使用querySelectorAll搜索類為.collapse項目。 他向我展示了三個要素。 然后遍歷這三個元素，並查找具有.show類的元素。 當他使用console.log (el.children [0])他應該向我展示一個元素，並向我展示一些元素。 我想在第一個元素el.children [0] .click ()上啟動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 />);