[英]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.