How do you define an event handler in React?

How do you define an event handler in React?

• A. as a standalone function outside the component
• B. as a function inside render
• C. as a method on the component class
• D. as a prop

Answer: (C)

Event handlers in class-based React components are defined as methods on the component class. This setup lets the handler access the component’s state and props through this, so you can read or update this.state and use this.props as needed. To ensure the method runs with the correct context, you bind it to the instance—commonly in the constructor with this.handleClick = this.handleClick.bind(this);—or you can define it as an arrow function property like handleClick = (e) => { ... }, which preserves this automatically. Then you attach it in JSX, for example onClick={this.handleClick}. That pattern is the standard way to define event handlers in class components because it keeps the handler tied to the component instance and its data. Other approaches exist in certain scenarios—for instance, defining a function inside render or passing a function from a parent as a prop—but they come with trade-offs, such as creating new functions on every render or shifting responsibility to a parent component.

Event handlers in class-based React components are defined as methods on the component class. This setup lets the handler access the component’s state and props through this, so you can read or update this.state and use this.props as needed. To ensure the method runs with the correct context, you bind it to the instance—commonly in the constructor with this.handleClick = this.handleClick.bind(this);—or you can define it as an arrow function property like handleClick = (e) => { ... }, which preserves this automatically. Then you attach it in JSX, for example onClick={this.handleClick}.

That pattern is the standard way to define event handlers in class components because it keeps the handler tied to the component instance and its data. Other approaches exist in certain scenarios—for instance, defining a function inside render or passing a function from a parent as a prop—but they come with trade-offs, such as creating new functions on every render or shifting responsibility to a parent component.