React оборачивает встроенные события браузера в кросс-браузерный объект под названием SyntheticEvent и использует единственный listener у корня приложения для отправки событий вашим обработчикам (делегирование событий). Вы просто присоединяете обработчики как props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) и принимают функцию, не строку (onClick={handleClick}, не onClick="handleClick()")e.preventDefault(), e.stopPropagation(), e.target.Не вызывайте функцию во время рендеринга — оберните её так, чтобы она выполнялась при событии, а не сразу:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
Вторая строка вызывает remove(id) во время построения JSX (при каждом рендеринге), что почти никогда не является тем, что вам нужно.
Для форм предпочитайте onSubmit на <form> (с preventDefault) вместо onClick на кнопке, чтобы клавиша Enter тоже работала.