React મૂળ બ્રાઉઝર ઈવેન્ટ્સને SyntheticEvent કહેવામાં આવતા ક્રોસ-બ્રાઉઝર ઑબ્જેક્ટમાં આવરણ કરે છે અને ઈવેન્ટ્સને તમારા હેન્ડલર્સમાં ડિસ્પેચ કરવા માટે ઍપ્લિકેશનના મૂળ પર એક જ શ્રોતા વપરાય છે (ઈવેન્ટ ડિલિગેશન). તમે ફક્ત હેન્ડલર્સને પ્રોપ્સ તરીકે જોડો.
<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!
બીજી લાઇન JSX બનાવતી વખતે remove(id) કૉલ કરે છે (દરેક રેન્ડર), જે લગભગ ક્યારેય ઇચ્છતું નથી.
ફોર્મ્સ માટે, બટન પર onClick કરતાં <form> પર onSubmit પસંદ કરો (preventDefault સાથે), જેથી Enter કી પણ કામ કરે.