React component with conditional form loading

Question

I'm remaking an existing application into a single page application. I've created this component to take the place of multiple pages in the previous version. It shows a form with disabled data about an organization, then allows incrementing or decrementing the data by conditionally loading the appropriate form. The design is good, but the implementation seems a bit heavy handed. Would love some feedback on ways to make this component better.

import React, { Component } from 'react';
import autoBind from 'react-autobind';

import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import Dialog from 'material-ui/Dialog';

import CurrentSeatsForm from './CurrentSeatsForm';
import ConfirmationDialog from './ConfirmationDialog';
import AddAccessForm from './AddAccessForm';
import RevokeAccessForm from './RevokeAccessForm';

const leftButtonStyles = { margin: '15px 0' };
const rightButtonStyles = { margin: '15px' };

export default class OrgSeatsForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      premiumTeacherSlots: props.premiumTeacherSlots,
      premiumStudentSlots: props.premiumStudentSlots,
      premiumStudentUpgrades: props.premiumStudentUpgrades,
      premiumTeacherSlotsToAdd: 0,
      premiumStudentSlotsToAdd: 0,
      premiumStudentUpgradesToAdd: 0,
      premiumTeacherSlotsToRevoke: 0,
      premiumStudentSlotsToRevoke: 0,
      premiumStudentUpgradesToRevoke: 0,
      addRevokeSlotsActive: false,
      showAddRevokeForms: 'none',
      showConfirmationDialog: false,
    };
    autoBind(this);
  }

  onTextFieldChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  showAddForm() {
    this.setState({ showAddRevokeForms: 'add' });
  }

  showRevokeForm() {
    this.setState({ showAddRevokeForms: 'revoke' });
  }

  hideAddRevokeForms() {
    this.setState({ showAddRevokeForms: 'none' });
  }

  openConfirmationDialog() {
    this.setState({ showConfirmationDialog: true });
  }

  closeConfirmationDialog() {
    this.setState({ showConfirmationDialog: false });
  }

  handleCancelConfirmationDialog() {
    this.closeConfirmationDialog();
    this.hideAddRevokeForms();
  }

  handleCancelAddRevoke() {
    this.hideAddRevokeForms();
  }

  handleSubmitConfirmationDialog() {
    this.submitSlotsChanges();
    this.hideAddRevokeForms();
    this.closeConfirmationDialog();
  }

  submitSlotsChanges() {
    this.disableAddRevoke();
    const slotValues = {
      premiumStudentSlots: this.state.premiumStudentSlotsToAdd,
      premiumTeacherSlots: this.state.premiumTeacherSlotsToAdd,
      premiumStudentUpgradess: this.state.premiumStudentUpgradesToAdd,
    };
  }

  justShowCurrentSlots() {
    return (
      <div className="col-xs">
        <div className="row">
          <CurrentSeatsForm
            premiumStudentSlots={this.state.premiumStudentSlots}
            premiumTeacherSlots={this.state.premiumTeacherSlots}
            premiumStudentUpgrades={this.state.premiumStudentUpgrades}
          />
        </div>
        <div className="row">
          <RaisedButton
            style={leftButtonStyles}
            label="Add"
            onClick={this.showAddForm}
          />
          <RaisedButton
            style={rightButtonStyles}
            label="Revoke"
            onClick={this.showRevokeForm}
          />
        </div>
      </div>
    );
  }

  showCurrentAndAddSlots() {
    return (
      <div className="col-xs">
        <div className="row">
          <CurrentSeatsForm
            premiumStudentSlots={this.state.premiumStudentSlots}
            premiumTeacherSlots={this.state.premiumTeacherSlots}
            premiumStudentUpgrades={this.state.premiumStudentUpgrades}
          />
          <AddAccessForm
            premiumStudentSlotsToAdd={this.state.premiumStudentSlotsToAdd}
            premiumTeacherSlotsToAdd={this.state.premiumTeacherSlotsToAdd}
            premiumStudentUpgradesToAdd={this.state.premiumStudentUpgradesToAdd}
            onTextFieldChange={this.onTextFieldChange}
          />
        </div>
        <div className="row">
          <RaisedButton
            style={leftButtonStyles}
            label="Submit Slot Changes"
            primary
            onClick={this.openConfirmationDialog}
          />
          <RaisedButton
            style={rightButtonStyles}
            label="Cancel"
            onClick={this.handleCancelAddRevoke}
          />
        </div>
        <ConfirmationDialog
          handleCancel={this.handleCancelConfirmationDialog}
          handleSubmit={this.handleSubmitConfirmationDialog}
          message="This action will add seats for this Organization"
          open={this.state.showConfirmationDialog}
        />
      </div>
    );
  }

  showCurrentAndRevokeSlots() {
    return (
      <div className="col-xs">
        <div className="row">
          <CurrentSeatsForm
            premiumStudentSlots={this.state.premiumStudentSlots}
            premiumTeacherSlots={this.state.premiumTeacherSlots}
            premiumStudentUpgrades={this.state.premiumStudentUpgrades}
          />
          <RevokeAccessForm
            premiumStudentSlotsToRevoke={this.state.premiumStudentSlotsToRevoke}
            premiumTeacherSlotsToRevoke={this.state.premiumTeacherSlotsToRevoke}
            premiumStudentUpgradesToRevoke={this.state.premiumStudentUpgradesToRevoke}
            onTextFieldChange={this.onTextFieldChange}
          />
        </div>
        <div className="row">
          <RaisedButton
            style={leftButtonStyles}
            label="Submit Slot Changes"
            primary
            onClick={this.openConfirmationDialog}
          />
          <RaisedButton
            style={rightButtonStyles}
            label="Cancel"
            onClick={this.handleCancelAddRevoke}
          />
        </div>
        <ConfirmationDialog
          handleCancel={this.handleCancelConfirmationDialog}
          handleSubmit={this.handleSubmitConfirmationDialog}
          message="This action will revoke seats for this Organization"
          open={this.state.showConfirmationDialog}
        />
      </div>
    );
  }

  showForms() {
    switch (this.state.showAddRevokeForms) {
      case 'add':
        return this.showCurrentAndAddSlots();
      case 'revoke':
        return this.showCurrentAndRevokeSlots();
      default:
        return this.justShowCurrentSlots();
    }
  }

  render() {
    return (
      <div className="col-xs-6">
        {this.showForms()}
      </div>
    );
  }
}

OrgSeatsForm.propTypes = {
  premiumTeacherSlots: React.PropTypes.string.isRequired,
  premiumStudentSlots: React.PropTypes.string.isRequired,
  premiumStudentUpgrades: React.PropTypes.string.isRequired,
};