大佬教程收集整理的这篇文章主要介绍了通过 onClick 方法将值传递给父组件但未定义，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我是 React 的新手，如果这是一个简单/愚蠢的问题，我深表歉意。我正在尝试使用 React 创建一个简单的计算器应用程序，我正在尝试简单地打印我单击的按钮的值。我有一个可以渲染所有按钮的键盘组件，但现在我只有一个。
const Keypad = () => {
return (
<div class@R_404_6889@="Keypad">
<button @R_404_6889@='1' onClick={e => this.onClick(e.@R_404_6889@)}>1</button>
</div>
)
}
export default Keypad
在我的主应用程序文件中，我有一个 onClick 方法，它会检查按下的按钮的值并打印它，当我调用 Keypad 组件时，我也会调用 onClick：
const onClick = (E) => {
if (e.@R_404_6889@ === "1") {
console.log(e.@R_404_6889@)
} else {
console.log("nope")
}
};
return (
<div class@R_404_6889@="header">
<header>
<h1>Calculator</h1>
</header>
<Result />
<Keypad onClick={onClick}/>
</div>
);
它编译成功，但是当我尝试单击按钮时，出现“TypeError：无法读取未定义的属性‘onClick’”错误。我遵循了来自不同网站的一些步骤，但对为什么这不起作用感到困惑..
您使用了函数式组件，因此 this 关键字是多余的。
const Keypad = ({onClick}) => {
return (
<div className="Keypad">
<button name='1' onClick={onClick}>1</button>
</div>
)
}
export default Keypad
然后将 e.name 传递给 onClick 组件中的 Keypad 函数。
const onClick = (E) => {
if (e.target.name === "1") {
console.log(e.target.Name)
} else {
console.log("nope")
}
};
return (
<div className="Header">
<header>
<h1>Calculator</h1>
</header>
<Result />
<Keypad onClick={onClick}/>
</div>
);
Keypad 组件没有定义的 this 和 onClick 回调定义，它是从父级作为 prop 传递的。
const Keypad = ({ onClick }) => {
return (
<div className="Keypad">
<button name='1' onClick={onClick}>1</button>
</div>
)
}
事件 e，应该是 e.target.name。
const onClick = (E) => {
if (e.target.name === "1") {
console.log(e.target.Name)
} else {
console.log("nope")
}
};
return (
<div className="Header">
<header>
<h1>Calculator</h1>
</header>
<Result />
<Keypad onClick={onClick}/>
</div>
);
以上是大佬教程为你收集整理的通过 onClick 方法将值传递给父组件但未定义全部内容，希望文章能够帮你解决通过 onClick 方法将值传递给父组件但未定义所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。