زر تبديل صورة مخصصة في ريكتجس

Question

لدي هذا الرمز ريكتجس لإظهار زر صورة مخصصة التي تبديل بين 2 صور مختلفة ل وإيقاف الدولة.هل هناك طريقة أبسط للقيام بذلك?كنت آمل كس قد يكون أقل خطوط من التعليمات البرمجية ، ولكن لم يكن قادرا على العثور على مثال بسيط.

الرمز أدناه يمر الدولة من <MyIconButton> إلى <MyPartyCatButton> ثم إلى <MyHomeView>.سيحتوي تطبيقي على 4 من هذه الأزرار المخصصة على الشاشة الرئيسية ، ولهذا السبب أخذت في الحسبان <MyIconButton>.

راجع للشغل-هذا لتطبيق جوال وقرأت (ولاحظت هذا بنفسي) إنه بطيء حقا في استخدام مربعات الاختيار على متصفحات الجوال;لهذا السبب اخترت تجربة ذلك دون استخدام مربعات الاختيار.

كود رد الفعل

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

إذا قمت بتحديث كوبونينت' ضغط ' الدعامة حيوي (كما فعلت) ، ببساطة

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
        />
    }
})

(تحرير:بهذه الطريقة ، على مكون ميبارتيكاتبوتون ، يمكنك تمرير وظيفة للتعامل مع الحدث 'توغلسليكتيونس'.وسيطة وظيفة الحدث هي كائن الحدث, ، ولكن لديك حالة الزر ألريدي في حالة المجمع (القديم ، لذلك يجب عكس ذلك).سيكون الرمز الخاص بك شيئا من هذا القبيل:

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

)

ولكن إذا لم تقم بذلك ، استخدم الدعامة لقيمة ديفولت:

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}
        />
    }
})