Benutzerdefinierte Bildumschaltfläche in ReactJS

Question

Ich habe diesen ReactJS-Code, um eine benutzerdefinierte Bildschaltfläche anzuzeigen, die zwischen 2 verschiedenen Bildern für den EIN- und Ausschaltzustand umschaltet.Gibt es einen einfacheren Weg, dies zu tun?Ich hatte gehofft, dass CSS weniger Codezeilen enthält, konnte aber kein einfaches Beispiel finden.

Der folgende Code übergibt den Status von <MyIconButton> zu <MyPartyCatButton> dann zu <MyHomeView>.Meine App wird 4 dieser benutzerdefinierten Schaltflächen auf dem Startbildschirm haben, weshalb ich ausgeklammert habe <MyIconButton>.

übrigens - dies ist für eine mobile App und ich habe gelesen (und das selbst bemerkt), dass die Verwendung von Kontrollkästchen in mobilen Browsern sehr langsam ist;deshalb habe ich mich entschieden, dies ohne Kontrollkästchen zu versuchen.

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 !
    );
  }
});

Answer 1

wenn Sie die Koponente 'gepresste' Requisite dynamisch aktualisieren (wie Sie es getan haben), einfach

var MyIconButton= React.createClass({
    render: function(){
        var pic= this.props.pressed? this.props.onpic : this.props.offpic
        return <img 
            src={pic} 
            onClick={this.props.tuggleSelection}  //updateFilter is wierd name
        />
    }
})

(BEARBEITEN:auf diese Weise können Sie in der MyPartyCatButton-Komponente eine Funktion übergeben, um das Ereignis 'tuggleSelection' zu behandeln.Ereignisfunktionsargument ist ein Ereignisobjekt, aber Sie haben den Schaltflächenzustand bereits im Wrapperzustand (den alten, also sollten Sie ihn invertieren).ihr Code wird ungefähr so aussehen:

render: function(){
    return <MyIconButton pressed={this.state.PartyCatPressed} tuggleSelection={this.updatePartyCategory} />
}
updatePartyCategory: function(e){
    this.setState( 
        {PartyCatPressed: !this.state.PartyCatPressed} //this invert PartyCatPressed value
    );
    console.log("INSIDE: MyHomeView() updatePartyCategory() " + this.state.b_MyPartyCat )
}

)

wenn Sie dies nicht tun, verwenden Sie Requisite für defulten Wert:

var MyIconButton= React.createClass({
    getInitialState: function(){
        return {pressed: this.props.defultPressed}
    },
    handleClick: function(){
        this.setState({pressed: !this.state.pressed})
    },

    render: function(){
        var pic= this.state.pressed? this.props.onpic : this.props.offpic
        return <img 
            src={pic} 
            onClick={this.handleClick}
        />
    }
})