React 드롭다운 구성 요소
12392 단어 reactreactnativetutorialbeginners
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 .
감사:)
행복한 코딩 :)
Reference
이 문제에 관하여(React 드롭다운 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/readymadecode/react-dropdown-component-1n36텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)