时间戳

首页 > 解决方案 > 在 react-bootstrap 中的元素上发起点击事件

javascript - 在 react-bootstrap 中的元素上发起点击事件

问题描述

使用 querySelectorAll 搜索具有 class 的项目.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;
}

标签： javascriptreactjsreact-bootstrap

解决方案

点击处理程序在此处记录。请注意，该示例将 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 />);

推荐阅读