React 드롭다운 구성 요소

드롭다운은 링크 등의 목록을 표시하기 위한 전환 가능한 상황별 오버레이입니다. 포함된 부트스트랩 드롭다운과 대화형으로 만들어집니다. 클릭하면 드롭다운이 토글됩니다.

React 드롭다운 구성 요소 만들기




class Dropdown extends React.Component {

  constructor(props) {
    super(props);

    this.toggleDropdown = this.toggleDropdown.bind(this);
    this.handleMouseEvent = this.handleMouseEvent.bind(this);
    this.handleBlurEvent = this.handleBlurEvent.bind(this);
    this.hasFocus = this.hasFocus.bind(this);

    this.state = {
      show: false
    };
  }

  componentDidMount() {
    document.addEventListener('mouseup', this.handleMouseEvent);
    this.dropdown.addEventListener('focusout', this.handleBlurEvent);
  }

  hasFocus(target) {
    if (!this.dropdown) {
      return false;
    }
    var dropdownHasFocus = false;
    var nodeIterator = document.createNodeIterator(this.dropdown, NodeFilter.SHOW_ELEMENT, null, false);
    var node;    

    while(node = nodeIterator.nextNode()) {
      if (node === target) {
        dropdownHasFocus = true;
        break;
      }
    }

    return dropdownHasFocus;
  }

  handleBlurEvent(e) {
    var dropdownHasFocus = this.hasFocus(e.relatedTarget);

    if (!dropdownHasFocus) {
      this.setState({
        show: false
      });
    }    
  }

  handleMouseEvent(e) {
    var dropdownHasFocus = this.hasFocus(e.target);

    if (!dropdownHasFocus) {
      this.setState({
        show: false
      });
    }
  }

  toggleDropdown() {
    this.setState({
      show: !this.state.show
    });
  }

  render() {
    return (
      <div className={`dropdown ${this.state.show ? 'show' : ''}`} ref={(dropdown) => this.dropdown = dropdown}>
        <button 
          className="btn btn-secondary dropdown-toggle" 
          type="button" 
          id="dropdownMenuButton" 
          data-toggle="dropdown" 
          aria-haspopup="true" 
          aria-expanded={this.state.show}
          onClick={this.toggleDropdown}>
          Dropdown button
        </button>
        <div 
          className="dropdown-menu" 
          aria-labelledby="dropdownMenuButton">
          <a className="dropdown-item" href="#nogo">Item 1</a>
          <a className="dropdown-item" href="#nogo">Item 2</a>
        </div>
      </div>
    );
  }
}


이제 반응 구성 요소가 있으며 이를 기능 또는 클래스 구성 요소에서 쉽게 사용할 수 있습니다.


구독 좋아요 공유와 긍정적인 피드백을 보내주세요.

더 많은 자습서를 보려면 visit my website .

감사:)
행복한 코딩 :)

좋은 웹페이지 즐겨찾기