如何在组件外部调用现有的onclick函数?

Question

我在Navbar.js组件中有一个菜单栏的onclick函数，我想在App.js中调用它，这样当我切换菜单栏时，我可以在我的网站中移动一些特定的页面。

这是我的App.js，路由内div与mainpage的className是路由/页面，我想移动每当我切换菜单栏

function App() {

return (

<AuthProvider>
<Router>
<PrivateRoute path="/" component={Navubaru}/>
<div className="mainpage">
<Route path="/home" component={Home}/>
</div>
</Router>
<Container className="d-flex align-items-center justify-content-center" style={{ minHeight: "100vh"}}>
<div className="w-100" style={{maxWidth:'400px'}}>
<Router>
<Switch>
<PrivateRoute exact path="/" component={Dashboard}/>
<Route path="/signup" component={Signup}/>
<Route path="/login" component={Login}/>
<Route path="/forgot-password" component={ForgotPassword}/>
<Route path="/update-profile" component={UpdateProfile}/>
</Switch>
</Router>
</div>

</Container>
</AuthProvider>
)}
export default App

这是我的Navbar.js它包含了侧边栏和导航栏，它还包含了onClick函数我试图调用在App.js:

import React, { useState } from 'react'
import {Navbar, Container} from 'react-bootstrap'
import { Link } from 'react-router-dom';
import { useAuth } from "../contexts/AuthContext"
import './styles/styles.css';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import { IconContext } from 'react-icons';
import { SidebarItem } from './SidebarItem';
export default function Navubaru({component: Component, ...rest}) {
const { currentUser } = useAuth()
const [sidebar, setSidebar] = useState(false);
const showSidebar = () => setSidebar(!sidebar);
return (
<div>

<Navbar bg="myColor" variant="dark">
<IconContext.Provider value={{ color: '#fff' }}>
<Link to='#' className='menu-bars'>
<FaIcons.FaBars onClick={showSidebar} />
</Link>
<nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
<ul className='nav-menu-items' onClick={showSidebar}>
<li className='navbar-toggle'>
<Link to='#' className='menu-bars'>
<AiIcons.AiOutlineClose />
</Link>
</li>
{SidebarItem.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
</nav>



</IconContext.Provider>
<Container>
<div className={sidebar ? 'navactive':'navclose'}>
<Navbar.Brand href="/">Customer Intelligence System</Navbar.Brand>
</div>
<Navbar.Toggle />
<Navbar.Collapse className="justify-content-end">
<Navbar.Text>
Signed in as: <a href="/">{currentUser && currentUser.email}</a>
</Navbar.Text>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
)
}

Answer 1

导出函数，然后在App.js中按名称导入

,

//NavBar.js
export const showSidebar = () => setSidebar(!sidebar);
//App.js
import { showSidebar } from ./path/to/NavBar.js

然后做你想做的

同样值得注意的是，更新引用前一状态的状态的正确方法是使用回调。

export const showSidebar = () => setSidebar((oldState) => !oldState)

https://reactjs.org/docs/hooks-reference.html functional-updates

Answer 2

很容易从另一个组件或文件调用一个组件的任何已分配事件。在这里，您需要了解这些钩子。

useRef()
forwardRef()

这里我通过forwardRef钩子传递了这个组件，这样我就可以从另一个组件或文件调用这个组件的任何分配的事件。像app.js

/**
*
* Navbar.js 
*
*/
import { forwardRef  } from "react";
const Navbar = (props, ref) => {
const onClickHandler = () => {
alert('clicked the inner button');
}
return (
<button onClick={onClickHandler} ref={ref} {...props}>  Inner Component Button </button>
)
}
export default forwardRef( Navbar )

这是我的app.js文件，我通过使用useRef hook

调用事件

import { useRef } from "react";
import Navbar from "./Navbar";
const App = () => {
const buttonRef = useRef(null);

const outerClickHandler = () => {
if( buttonRef.current ) {
buttonRef.current.click()
}
}

return (
<div className="App">
<button onClick={outerClickHandler}> Outer button </button>
<Navbar ref={buttonRef}/>
</div>
);
};
export default App;