简体   繁体   English

将 onclick 函数分享给按钮组件 React JS

[英]Share onclick function to button components React JS

I need to make a generic button in which I pass certain properties as a parameter.我需要制作一个通用按钮,在其中将某些属性作为参数传递。 one of those properties is the function that must be executed at the time of clicking event.这些属性之一是必须在单击事件时执行的函数。

function Boton(props: { name: React.ReactNode , funcion: React.ReactNode }) {
  return (<div className="center-div"><IonButton shape="round" onClick={props.funcion}> {props.name}</IonButton></div>);
}

But what I got is:但我得到的是:

JSX attribute) onClick?: ((event: React.MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | JSX 属性) onClick?: ((event: React.MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | undefined Type 'ReactNode' is not assignable to type '((event: MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) |未定义类型 'ReactNode' 不能分配给类型 '((event: MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | undefined'.不明确的'。 Type 'null' is not assignable to type '((event: MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) |类型 'null' 不能分配给类型 '((event: MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | undefined'.ts(2322) index.d.ts(1455, 9): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & Pick<IonButton, “color” | undefined'.ts(2322) index.d.ts(1455, 9):预期的类型来自属性 'onClick',它在类型 'IntrinsicAttributes & Pick<IonButton, “color” | 上声明“strong” | “强” | “disabled” | “禁用” | “size” | “尺寸” | “fill” | “填充” | “mode” “模式”

But I do not want a Mouse event because it is going to be a mobile app.但我不想要鼠标事件,因为它将成为一个移动应用程序。

It seems like you are giving React.ReactNode type to your function parameter.看起来你给你的函数参数提供了React.ReactNode类型。 You should give it a function type.你应该给它一个函数类型。

Maybe something like this: () => void也许是这样的:( () => void

Also, I guess your name parameter should be a String另外,我猜你的 name 参数应该是一个String

The 'function' props to the generic button shouldn't be React.ReactNode.通用按钮的“功能”道具不应该是 React.ReactNode。

Iam using arrow function here,我在这里使用箭头函数,

const Button = (props: { name: React.ReactNode, onClick: Function}) => 
   (<div className="center-div">
     <IonButton shape="round" onClick={props.onClick}> 
      {props.name}
    </IonButton>
 </div>);

And where ever you are defining your generic button, define the name and onClick props.无论您在哪里定义通用按钮,都要定义名称和 onClick 道具。

Hope the above code will solve your issue.希望上面的代码能解决你的问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM