Question

我正在尝试获取NavDropdown的ID，并尝试设置新值以使用onclick事件在react js中显示。我已经尝试了以下代码，但无法正常工作。

        <NavDropdown title="Learn" id='Learn'
          onMouseEnter = { this.handleOpen }
          onMouseLeave = { this.handleClose }
          show={this.state.isOpen}
           >

        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>

     <NavDropdown title="API"
       onMouseEnter = { this.handleOpen }
       onMouseLeave = { this.handleClose }
       show= {this.state.isOpen} 
       id='API'
      >
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>

      constructor(props){
      super(props);
      this.state = { isOpen:false }
      this.handleOpen = this.handleOpen.bind(this);
      this.handleClose = this.handleClose.bind(this);

      }
       handleOpen(event) {
       document.getElementById(event.target.id).show=true;
      }
       handleClose(event){
       document.getElementById(event.target.id).show=false;
      }

Answer 1

您应该使用this.setState属性的event.target.id代替show。

 handleOpen() {
   this.setState({isOpen: true});
  }
 handleClose(){
   this.setState({isOpen: false});
 }

react：无法使用onclick事件获取NavDropdown的ID

1 个答案: