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

Question

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

这是我的 App.js，div 内带有主页类名的路线是 route/page 我想在切换菜单栏时移动

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 挂钩调用事件

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;

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

How to call an existing onclick function outside component?

css

frontend

reactjs

react-router

react-native