реагировать: невозможно получить идентификатор NavDropdown с помощью события onclick

Question

Я пытаюсь получить идентификатор NavDropdown и пытаюсь установить новое значение для отображения в реакции js, используя событие onclick. Я пробовал следующий код, но он не работает.

        <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});
 }