Responding to events
You can respond to events by declaring event handler functions inside your components:
function MyButton ( ) {
function handleClick ( ) {
alert ( 'You clicked me!' ) ;
}
return (
< button onClick = { handleClick } >
Click me
</ button >
) ;
}
Notice how onClick={handleClick} has no parentheses at the end! Do not call the event handler function: you only need to pass it down. React will call your event handler when the user clicks the button.
If you want to change selection, open document below and click on "Move attachment"
Quick Start – Reactp(product => <li key={product.id} style={{ color: product.isFruit ? 'magenta' : 'darkgreen' }} > {product.title} </li> ); return ( <ul>{listItems}</ul> ); } Show more <span>Responding to events You can respond to events by declaring event handler functions inside your components: function MyButton() { function handleClick() { alert('You clicked me!'); } return ( <button onClick={handleClick}> Click me </button> ); } Notice how onClick={handleClick} has no parentheses at the end! Do not call the event handler function: you only need to pass it down. React will call your event handler when the user clicks the button. Updating the screen Often, you’ll want your component to “remember” some information and display it. For example, maybe you want to count the number of times a button is clicked. To do Summary
| status | not read | | reprioritisations | |
|---|
| last reprioritisation on | | | suggested re-reading day | |
|---|
| started reading on | | | finished reading on | |
|---|
Details