A Simple Rule for Naming Event Handlers

02-edit-form-meaningful.jsx

class EditForm extends React.Component {
  state = { discardModalIsShown: false };

  // Previously `onClick`
  showDiscardModal = () => this.setState({ discardModalIsShown: true });

  // Previously `onNo` / `onClose`
  hideDiscardModal = () => this.setState({ discardModalIsShown: false });

  // Previously `onSubmit`
  save = ($event) => {
    $event.preventDefault();
    this.hideDiscardModal();
    this.props.onSave();
  };

  // Previously `onYes`
  discard = () => {
    this.hideDiscardModal();
    this.props.onDiscard();
  };
  
  render() {
    return (
      <form onSubmit={this.save}>
        {/* Some form fields */}
        {this.props.children}

        <button type="button" onClick={this.showDiscardModal}>Discard</button>
        <button type="submit">Save</button>

        {this.state.discardModalIsShown && (
          <ConfirmationModal
            onYes={this.discard}
            onNo={this.hideDiscardModal}
            onClose={this.hideDiscardModal}
          >
            Discard all your hard work?
          </ConfirmationModal>
        )}
      </form>
    );
  }
}