1 respuesta a la subpregunta:

La función de flecha en línea se crea en el procesamiento porque la definición de la función está dentro del controlador onClick, que está dentro del método de procesamiento del componente (o retorno, en el caso de los componentes funcionales de React).

Usaría una función en línea para pasar argumentos adicionales a una función, como un valor de un bucle o el valor del botón de destino.

Echemos un vistazo a un ejemplo:

 import React from 'react'; function App() { return ( <button onClick={() => alert('hello'))}> Click me! </button> ); } export default App;

2 Respuesta a la pregunta secundaria: puede usar para usarlo. Puede echar un vistazo a las diferentes formas en que puede hacer el manejo de eventos onClick aquí

La función 'anonym/arrow-function' es para pasar la referencia de la función, y esa referencia reaccionará cuando detecte el evento. Es como almacenamiento variable

Si no puede usarlo, puede pasar una referencia de una función normal

 const handleSubmit = (...args) => {} <form onSubmit={handleSubmit} className={classes.form}>

los argumentos obtendrán todos los parámetros de evento de cualquier cosa que controle el evento