如何在組件外呼叫現有的onclick函式？

我的Navbar.js組件中的選單欄有一個 onclick 功能，我想在我的組件中呼叫它，App.js以便在切換選單欄時可以將網站中的某些特定頁面向右移動。

這是我App.js的 div 內的路由，其 className 為 mainpage 是每當我切換選單欄時我想移動的路由/頁面

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它包含側邊欄和導航欄，它還包含我試圖在 App.js 中呼叫的 onClick 函式：

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>
    )
}

uj5u.com熱心網友回復：

只需匯出函式，然后在 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

uj5u.com熱心網友回復：

很容易從另一個組件或檔案呼叫一個組件的任何指定事件。在這里，您將需要了解這些鉤子。

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;

標籤：css 反应 反应原生 反应路由器 前端

上一篇：萬文多圖之搜索引擎使用教程(建議收藏)

下一篇：映射陣列以回傳具有不同類名的組件