#reactjs
#reactjs
Вопрос:
<ClickAwayListener onClickAway={this.handleClose}>
<Navbar color="light" light expand="md" className="navbar-fixed-top">
<Container>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#" id="link-menu-1" className="nav-link" onClick={this.handleLoans}>LOANS {this.state.LOANS ? <FontAwesomeIcon className="faChevronDown" icon={faChevronUp} /> : <FontAwesomeIcon className="faChevronDown" icon={faChevronDown} />} </NavLink>
</NavItem>
<NavItem>
<NavLink href="#" id="link-menu-2" className="nav-link" caret onClick={this.handleGovtSubsidy}>Govt. Subsidy {this.state.GovtSubsidy ? <FontAwesomeIcon className="faChevronDown" icon={faChevronUp} /> : <FontAwesomeIcon className="faChevronDown" icon={faChevronDown} />} </NavLink>
</NavItem>
<NavItem>
<NavLink href="#" id="link-menu-3" className="nav-link" caret onClick={this.handleGENINSURANCE}> GEN. INSURANCE {this.state.GENINSURANCE ? <FontAwesomeIcon className="faChevronDown" icon={faChevronUp} /> : <FontAwesomeIcon className="faChevronDown" icon={faChevronDown} />} </NavLink>
</NavItem>
<NavItem>
<NavLink href="#" id="link-menu-4" className="nav-link" caret onClick={this.handleLIFEINSURANCE}>LIFE INSURANCE {this.state.LIFEINSURANCE ? <FontAwesomeIcon className="faChevronDown" icon={faChevronUp} /> : <FontAwesomeIcon className="faChevronDown" icon={faChevronDown} />} </NavLink>
</NavItem>
<NavItem>
<NavLink href="#" id="link-menu-5" className="nav-link" caret onClick={this.handleELITESERVICES}>ELITE SERVICES {this.state.ELITESERVICES ? <FontAwesomeIcon className="faChevronDown" icon={faChevronUp} /> : <FontAwesomeIcon className="faChevronDown" icon={faChevronDown} />} </NavLink>
</NavItem>
</Nav>
</Container>
</Navbar>
</ClickAwayListener>
<div className="submenu-cover">
{this.state.LOANS ?
<div id="menu-1" className="header-submenu loan-submenu">
<PerfectScrollbar component="div" >
<Container fluid={true} >
<Row xs="4" >
<Col className="img-cover">
<img src={LoanMenu} />
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Retails Loans</div>
<ListGroup>
<ListGroupItem onClick={() => this.gotoPersonalLoanForm()}>Retail Home Loan</ListGroupItem>
<ListGroupItem>Retail LAP (Loan Against Property)</ListGroupItem>
<ListGroupItem>Retail LRD (Lease Rental Discounting)</ListGroupItem>
<ListGroupItem>Retail APF</ListGroupItem>
</ListGroup>
</div>
<div className="list-wrap">
<div className="list-title">INFRA Loans</div>
<ListGroup>
<ListGroupItem>Construction Finance</ListGroupItem>
<ListGroupItem>Infrastructure Finance</ListGroupItem>
</ListGroup>
</div>
</Col>
<Col>
<div className="list-wrap">
<div className="list-title">SME Loans</div>
<ListGroup>
<ListGroupItem><Link to='/BusinessLoanForm'>SME CC/OD</Link></ListGroupItem>
<ListGroupItem>SME Term Loan</ListGroupItem>
<ListGroupItem>SME Term Loan CC/OD</ListGroupItem>
<ListGroupItem>SME NFB (Non Fund Base)</ListGroupItem>
<ListGroupItem>SME LAP (Loan Against Property)</ListGroupItem>
<ListGroupItem>SME CGTMSE</ListGroupItem>
</ListGroup>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Unsecured Loans</div>
<ListGroup>
<ListGroupItem>Business Loan</ListGroupItem>
<ListGroupItem>Personal Loan</ListGroupItem>
<ListGroupItem>School Fee Funding</ListGroupItem>
</ListGroup>
</div>
<div className="list-wrap">
<div className="list-title">Channel Finance</div>
<ListGroup>
<ListGroupItem>Anchor Lead Bill Discounting</ListGroupItem>
<ListGroupItem>Anchor Lead Input Finance</ListGroupItem>
<ListGroupItem>Vendor Lead Bill Discounting</ListGroupItem>
</ListGroup>
</div>
</Col>
</Row>
</Container>
</PerfectScrollbar>
</div>
: ''}
{this.state.GovtSubsidy ?
<div id="menu-2" className="header-submenu subsidy-submenu">
<PerfectScrollbar component="div" >
<Container fluid={true} >
<Row xs="4" >
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Interest Subsidy</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Central Govt. Subsidy</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Capital Subsidy</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Electric Subsidy</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">GST Subsidy</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Others</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col className="img-cover">
<img src={SubsidyMenu} />
</Col>
</Row>
</Container>
</PerfectScrollbar>
</div>
: ''}
{this.state.GENINSURANCE ?
<div id="menu-3" className="header-submenu geninsurance-submenu">
<PerfectScrollbar component="div" >
<Container fluid={true} >
<Row xs="4" >
<Col className="img-cover">
<img src={GenInsuranceMenu} />
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Aviation Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Credit Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Agriculture Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Motor Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Engineering Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Fire Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Health Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Liability Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Marine Cargo</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Miscellaneous Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
</Row>
</Container>
</PerfectScrollbar>
</div>
: ''}
{this.state.LIFEINSURANCE ?
<div id="menu-4" className="header-submenu lifeinsurance-submenu">
<PerfectScrollbar component="div" >
<Container fluid={true} >
<Row xs="4" >
<Col>
<div className="list-wrap">
<div className="list-title">Term Plan Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap">
<div className="list-title">Traditional Plan Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap">
<div className="list-title">ULIP Plan Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col className="img-cover">
<img src={LifeInsuranceMenu} />
</Col>
</Row>
</Container>
</PerfectScrollbar>
</div>
: ''}
{this.state.ELITESERVICES ?
<div id="menu-5" className="header-submenu eliteservices-submenu">
<PerfectScrollbar component="div" >
<Container fluid={true} >
<Row xs="4" >
<Col className="img-cover">
<img src={EliteServicesMenu} />
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Business Valuations</div>
<ListGroup>
<ListGroupItem>Business Takeover</ListGroupItem>
<ListGroupItem>Purchase Valuation</ListGroupItem>
<ListGroupItem>New Share Issue valuation </ListGroupItem>
<ListGroupItem>Business Synergy Valuation </ListGroupItem>
</ListGroup>
</div>
<div className="list-wrap">
<div className="list-title">Strategic Financial Advisor</div>
<ListGroup>
<ListGroupItem>Company profile preparation</ListGroupItem>
<ListGroupItem>Outsourced CFO Service</ListGroupItem>
<ListGroupItem>Project Report</ListGroupItem>
<ListGroupItem>Financial Projections</ListGroupItem>
</ListGroup>
</div>
</Col>
<Col>
<div className="list-wrap">
<div className="list-title">Compliance Services</div>
<ListGroup>
<ListGroupItem>COP certificate</ListGroupItem>
<ListGroupItem>MOF certificate</ListGroupItem>
<ListGroupItem>Funds Utilisation Certificate</ListGroupItem>
<ListGroupItem>DCCO Certificate </ListGroupItem>
<ListGroupItem>Net Worth Certificate </ListGroupItem>
<ListGroupItem>Statutory Compliance Certificate </ListGroupItem>
<ListGroupItem>Certificate for Subsidy</ListGroupItem>
<ListGroupItem>Stock Statement </ListGroupItem>
</ListGroup>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Equity Fund Raise</div>
<ListGroup>
<ListGroupItem>Angle Fund Raise</ListGroupItem>
<ListGroupItem>Seed Fund Raise</ListGroupItem>
<ListGroupItem>VC Fund Raise </ListGroupItem>
<ListGroupItem>PE Fund Raise</ListGroupItem>
</ListGroup>
</div>
<div className="list-wrap">
<div className="list-title">Merger amp; Acquisition</div>
<div className="list-text set-max">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
</Row>
</Container>
</PerfectScrollbar>
</div>
: ""}
</div>
это мой код, и я уже применил ClickAwayListener, но он не работает, и я не могу решить эту ошибку, потому что я не могу понять отладчик ошибок, который я применял многими способами, но все еще не смог добиться успеха. Заранее большое вам спасибо за помощь.
В этом коде список меню заголовка находится на панели навигации, и когда мы нажимаем на конкретное меню заголовка, открывается подменю этого меню.
И когда я нажимаю на это меню, раздел подменю будет закрыт.
просто из-за отсутствия опыта в Reactjs я не могу это решить.
Для меня будет здорово, если кто-нибудь сможет дать мне решение этой проблемы.
Комментарии:
1. Можете ли вы, пожалуйста, добавить код сюда , код не дает ясности, может быть, живая демонстрация и код работает
2. Я дал вам весь код в MyFile.js файл
3. Большое вам спасибо @ShubhamVerma, я нашел решение этой проблемы