Benutzerdefinierte Bild-toggle-button in ReactJS

Habe ich diese ReactJS code zum anzeigen einer benutzerdefinierten image-Taste schaltet zwischen 2 unterschiedlichen Bilder für ON-und OFF-Zustand. Gibt es eine einfachere Möglichkeit, dies zu tun? Ich hatte gehofft, CSS-möglicherweise weniger Zeilen code, aber war nicht in der Lage zu finden, ein einfaches Beispiel.

Den code unten übergibt Zustand aus <MyIconButton> zu <MyPartyCatButton> dann <MyHomeView>. Meine app wird haben 4 von diesen benutzerdefinierten buttons auf dem home-Bildschirm, das ist, warum ich ausklammern <MyIconButton>.

btw - das ist für eine mobile App und ich lese (und bemerkte das ich) es ist wirklich langsam über die Checkboxen auf mobilen Browsern; deshalb habe ich beschlossen, zu versuchen, diese ohne mithilfe der Kontrollkästchen.

ReactJS code

var MyIconButton = React.createClass({

  handleSubmit: function(e) {
    e.preventDefault();
    console.log("INSIDE: MyIconButton handleSubmit");

    //Change button's state ON/OFF, 
    //then sends state up the food chain via            
    // this.props.updateFilter( b_buttonOn ).
    var b_buttonOn = false;
    if (this.props.pressed === true) {
      b_buttonOn = false;
    }
    else {
      b_buttonOn = true;
    }
    //updateFilter is a 'pointer' to a method in the calling React component.
    this.props.updateFilter( b_buttonOn ); 
  },

  render: function() {

    //Show On or Off image.
    //** I could use ? : inside the JSX/HTML but prefer long form to make it explicitly obvious. 
    var buttonImg = "";
    if (this.props.pressed === true) {
      buttonImg = this.props.onpic;
    }
    else {
      buttonImg = this.props.offpic;
    }

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type="image" src={buttonImg}></input>
        </form>
      </div>
    );
  }
});


//<MyPartyCatButton> Doesn't have it's own state, 
//passes state of <MyIconButton> 
//straight through to <MyHomeView>.
var MyPartyCatButton = React.createClass({

  render: function() {
    return (
      <MyIconButton pressed={this.props.pressed} updateFilter={this.props.updateFilter} onpic="static/images/icon1.jpeg" offpic="static/images/off-icon.jpg"/>
    );
  }
});

//
//Main App view
var MyHomeView = React.createClass({
  getInitialState: function() {
    //This is where I'll eventually get data from the server.
    return {
      b_MyPartyCat: true
    };
  },

  updatePartyCategory: function(value) {
    //Eventually will write value to the server.
    this.setState( {b_MyPartyCat: value} );
    console.log("INSIDE: MyHomeView() updatePartyCategory() " + this.state.b_MyPartyCat );
  },

  render: function() {
    return (
        <div>
         <MyPartyCatButton pressed={this.state.b_MyPartyCat} updateFilter={this.updatePartyCategory}/>
        </div>

        //Eventually will have 3 other categories i.e. Books, Skateboards, Trees !
    );
  }
});