What I really like about the declarative event handler syntax is that it's easy to read when there's more than one handler assigned to an element. Sometimes, for example, there are two or three handlers for an element. Imperative code is difficult to work with for a single event handler, let alone several of them. When an element needs more handlers, it's just another JSX attribute. This scales well from a code-maintainability perspective, as this example shows:
import React, { Component } from "react";
export default class MyInput extends Component {
onChange() {
console.log("changed");
}
onBlur() {
console.log("blured");
}
render() {
return <input onChange={this.onChange} onBlur={this.onBlur} />;
}
}
This <input> element could have several more event handlers, and the code would be just as readable.
As you keep adding more event handlers to your components, you'll notice that a lot of...