YouTiphello
{/* Pass arguments via the bind() method. */}ClickReact Event Handle
# React Event Handling
Event handling in React elements is similar to DOM elements. However, there is a slight syntax difference:
* React event handler attribute names use camelCase, not lowercase.
* If using JSX syntax, you need to pass a function as the event handler, not a string (as in DOM elements).
The usual HTML way is:
In React, it is written as:
Another difference in React is that you cannot return **false** to prevent default behavior; you must explicitly use `preventDefault`.
For example, to prevent a link from opening a new page by default in HTML, you might write: Click me
In React, it is written as:
function ActionLink(){function handleClick(e){e.preventDefault(); console.log('The link was clicked.'); }return( Click me ); }
In this example, `e` is a synthetic event.
When using React, you typically don't need to use `addEventListener` to add listeners to an already created DOM element. You just need to provide a listener when the element is initially rendered.
When you define a component using ES6 class syntax, the event handler becomes a method of the class. For example, the following `Toggle` component renders a button that allows the user to toggle the switch state:
## Example
class Toggle extends React.Component{constructor(props){super(props); this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); }handleClick(){this.setState(prevState =>({isToggleOn: !prevState.isToggleOn})); }render(){return(); }}const root = ReactDOM.createRoot(document.getElementById("root")); root.render(, document.getElementById('example'));
[Try it »](#)
You must be careful about `this` in JSX callbacks. Class methods are not bound by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is called.
This is not a special behavior of React; it's part of how functions work in JavaScript. In general, if you don't add `()` after the method, like `onClick={this.handleClick}`, you should bind `this` to the method.
If using `bind` is annoying, there are two ways to solve this. If you are using the experimental property initializer syntax, you can use a property initializer to correctly bind the callback:
class LoggingButton extends React.Component{// This syntax ensures `this` is bound in handleClick// It's just a test handleClick = () =>{console.log('this is:', this); }render(){return(); }}
If you are not using property initializer syntax, you can use an arrow function in the callback:
class LoggingButton extends React.Component{handleClick(){console.log('this is:', this); }render(){// This syntax ensures `this` is bound in handleClick return(); }}
The problem with this syntax is that a different callback is created every time `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower-level components, those components might perform extra re-renders. We generally recommend binding in the constructor or using property initializer syntax to avoid this kind of performance issue.
* * *
## Passing Arguments to Event Handlers
Often we need to pass additional arguments to event handlers. For example, if `id` is the ID of the row you want to delete, both of the following ways can pass arguments to the event handler:
The two ways above are equivalent.
In both examples, the argument `e`, representing the React event object, is passed as the second argument. With the arrow function, the event object must be passed explicitly, but with `bind`, the event object and additional arguments are passed implicitly.
It's worth noting that when passing arguments to a listener function via `bind`, in a listener function defined in a class component, the event object `e` should come after the passed arguments, for example:
class Popper extends React.Component{constructor(){super(); this.state = {name:'Hello world!'}; }preventPop(name, e){// The event object e should be placed last e.preventDefault(); alert(name); }render(){return(
); }}