为什么在提交处理程序的匿名函数中包装两个函数后，事件对象就不可访问了

Question

所以我在onClick处理程序中封装了两个函数，如下所示：

const PlannerDetailsFooter = (props) => {
const [checked, setChecked] = useState(false);
const handleChange = () => {
setChecked((prev) => !prev);
};
return (
<div className="details-footer w-full p-4 bottom-0 absolute border-t-1">
{props.emailConfig.isHidden ? null :
<button id="mail-button"

onClick={() => {props.emailHandler(); handleChange()}}
>{props.emailConfig.buttonText}</button>
</div>
)
}

这是位于父组件中的两个被调用函数之一

const emailHandler = (event) => {
if (event.target.id === "mail-button") {
setEmailConfig({...emailConfig, isHidden: false, buttonText: 'Send Now'})
} else {
setEmailConfig(event.target.value)
}
}

现在我得到错误

无法读取未定义(读取"目标"(的属性

使用此解决方案，父组件中的处理程序可以访问事件对象：

onClick={props.emailHandler}

Answer 1

当您使用onClick={props.emailHandler}时，您正在将emailHandler绑定到onclick，它将接收onclick传递的参数。

现在，当您使用() => {props.emailHandler(); ...}时，您不会将参数传递给emailHandler。要解决此问题，您可以执行(e) => {props.emailHandler(e); ...}