A Simple Rule for Naming Event Handlers

01-edit-form-vague.jsx

class EditForm extends React.Component {
  state = { discardModalIsShown: false };
  
  onSubmit = ($event) => {
    $event.preventDefault();
    this.setState({ discardModalIsShown: false });
    this.props.onSave();
  };
  
  onClick = () => this.setState({ discardModalIsShown: true });
  
  onYes = () => {
    this.setState({ discardModalIsShown: false });
    this.props.onDiscard();
  };
  
  onNo = () => this.setState({ discardModalIsShown: false });
  
  onClose = () => this.setState({ discardModalIsShown: false });
  
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        {/* Some form fields */}
        {this.props.children}

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

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