将 onclick 函数作为参数传递给 react/typescript 中的另一个组件

Posted 2023-03-05

【中文标题】将 onclick 函数作为参数传递给 react/typescript 中的另一个组件

【英文标题】：passing onclick function as argument to another component in react/typescript

【发布时间】：2021-07-25 19:51:06

【问题描述】：

这里是新的 Reactjs(Hooks) 开发人员，我的问题是：我现在在 Menu.tsx 中，我想单击该按钮，它应该会影响“Transports.tsx”中的另一个组件，我已经编写了两种方法（不知道如何使它们工作），一种方法是普通按钮并单击它，另一种方法是将它们添加到 '' 中。如果我将该按钮放在同一个组件“Transports.tsx”中，它将毫无问题地工作，但需要在“Menu.tsx”中有该按钮。

import React from 'react'

function Menu() 
  return (
    <div>
        <button
                    type="button"
                    className="btn btn-secondary"
                    data-bs-dismiss="modal"
                    onClick=() => filterData(OrderState.Delivered)
                  >
                    delivered
                  </button>

                  /* <Link to="/Transports">
                  <button
                    type="button"
                    className="btn btn-secondary"
                    data-bs-dismiss="modal"
                    onClick=() => filterData(OrderState.Delivered)
                  > delivered</button>
            </Link> */
    </div>
  )


export default Menu

Transports.tsx

import React from 'react'

function Transports() 
    function filterData(filter: any) 
        setDefault(true);
        if (filter) 
          setData(ordrs?.filter((f) => f.state === filter));
         else 
          setData(ordrs?.filter((f) => f.state !== "Delivered"));
        
      
    return (
        <div>
            
        </div>
    )


export default Transports

【问题讨论】：

***.com/questions/37949981/…这可能对你有帮助

这两个不是父子，我的意思是这些不在每个里面

那么您可能需要了解上下文。 （或redux）。 reactjs.org/docs/context.html#dynamic-context。另一种选择是在<Link to=pathname: "/second_page", state: id: 123 /> 中传递一些状态值，然后根据状态值，您可以在useEffect 中触发。 ***.com/a/64008243/2650209

你可以使用 useContext 或 redux 。

你能举个例子吗？

【参考方案1】：

正如评论中提到的，您应该探索上下文的概念，因为它是一种更可取的方法。

下面是一个可以完成这项工作的解决方法，但它有点像 hack。

import React from 'react'

function Menu() 
  return (
    <div>
       <Link to=pathname: "/Transports", state: triggerFilters: true, filters: OrderState.Delivered>
         <button
           type="button"
           className="btn btn-secondary"
           data-bs-dismiss="modal"
          > delivered</button>
        </Link>
    </div>
  )


export default Menu

import React from 'react'

function Transports(props) 
  function filterData(filter: any) 
    setDefault(true);
    if (filter) 
      setData(ordrs?.filter((f) => f.state === filter));
     else 
      setData(ordrs?.filter((f) => f.state !== "Delivered"));
    
  
  
  useEffect(() => 
    if (props.location.state.triggerFilters === true) 
      filterData(props.location.state.filters);
    
  , [filterData])

  return (
    <div>          
    </div>
  )


export default Transports

上面的代码只是一个示例，您也可以在menu 的状态下传递过滤器，并在transports 中使用这些过滤器。

进一步了解反应上下文和路由

【讨论】：

如果你能提供上下文版本会更好，但试过这个，它说'TypeError：无法读取未定义的属性'状态'，还有'找不到名称'filterData'.ts (2304)'

我已更新代码以删除第二个错误。如果您已正确集成反应路由器，则不应出现第一个错误。并且 Context 在组件中实现并不是那么简单。您必须在应用程序级别执行此操作。先尝试一下。

【参考方案2】：

您应该为此使用上下文 api，因为它们不在同一层次结构中。使用上下文 api 来避免您重组项目以进行道具钻孔...

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

本教程通过示例更好地解释上下文 api

https://dev.to/uyadavdev/context-api-hooks-building-minimalist-dark-mode-33b6

【讨论】：

如果您能使用我的代码给出工作示例，将不胜感激

我的两个组件在这里： import Menuu from "./Menu";从“./OwnTransports”进口运输； function App() return ( ); 导出默认应用；