Warum kann auf das Ereignisobjekt nicht zugegriffen werden, wenn ich zwei Funktionen in eine anonyme Funktion im Submit-Handler umschließe?

Also habe ich zwei Funktionen wie folgt in einen onClick-Handler gepackt:

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>
 )
}

Dies ist eine der beiden aufgerufenen Funktionen, die sich in der übergeordneten Komponente befindet

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

Jetzt bekomme ich den Fehler

Eigenschaften von undefined können nicht gelesen werden (Lesen von 'Ziel')

Mit dieser Lösung kann der Handler in der übergeordneten Komponente auf das Ereignisobjekt zugreifen:

onClick={props.emailHandler}

Lösung des Problems

Wenn Sie verwenden onClick={props.emailHandler}, binden Sie emailHandler an onclick und erhalten die von onclick übergebenen Parameter.

Wenn Sie jetzt verwenden, übergeben Sie () => {props.emailHandler();...}die Parameter nicht an emailHandler. Um dies zu beheben, können Sie tun(e) => {props.emailHandler(e);...}