如何在 React Bootstrap 中向 Nav.Link 添加点击事件监听器？答案

【问题标题】：How to add click event listener to Nav.Link in React Bootstrap?如何在 React Bootstrap 中向 Nav.Link 添加点击事件监听器？
【发布时间】：2020-10-10 19:18:02
【问题描述】：

return (

            <Navbar bg="dark" variant="dark">
                <Navbar.Brand href="/">Instagram</Navbar.Brand>
                <Nav className="mr-auto">
                    <Nav.Link href="/">main</Nav.Link>
                    <Nav.Link><a onClick={logoutHandler}>logout</a></Nav.Link>
                </Nav>
                <Form inline>
                    <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                    <Button variant="outline-info">Search</Button>
                </Form>
            </Navbar>
        )

我想在上添加 onclick 事件。就像我对我的代码所做的那样.. 但它没有用。我该怎么做？

【问题讨论】：

标签： html reactjs react-bootstrap

【解决方案1】：

查看文档，我认为您可能可以使用onSelect：https://react-bootstrap.github.io/components/navs/#nav-link-props

return (
    <Navbar bg="dark" variant="dark">
            <Navbar.Brand href="/">Instagram</Navbar.Brand>
            <Nav className="mr-auto">
                <Nav.Link href="/">main</Nav.Link>
                <Nav.Link onSelect={logoutHandler}>logout</Nav.Link>
            </Nav>
            <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                <Button variant="outline-info">Search</Button>
            </Form>
        </Navbar>
    );

【讨论】：