toggle Hintergrundfarbe des ausgewählten Listenelements react.js

Question

was ich tun möchte, wenn ich auf eines der Listenelemente klicke, möchte ich die Klasse ausgewählt werden angewendet und wenn ich wieder klicke ich möchte es entfernt werden, so im Grunde eine Toggle-Funktion, aber es passiert zu allen drei Listenelemente, so dass, wenn ich auf einem klicken, erhalten alle ausgewählten, aber ich will es so nur kann man zu einer Zeit

import React from 'react'; 



export default class Order extends React.Component { 
constructor() { 
    super() 
    this.state = { 
     selected: false, 
    }; 
    } 

toggleChoice() { 
    const selected = !this.state.selected; 
    this.setState({selected}); 
    } 
    render() { 
    const { selected } = this.state; 
    const selectedCircle = selected ? " selected":""; 
    return (
     <div class="container" id="order-layout"> 
      <div class="row"> 

        <div class="card-panel white"> 
         <div class="center"> 
         <h5>Your Order</h5> 
         <p class="margin-top-30 bold">Choose Pizza size in cm</p> 
         <ul class="margin-top-30"> 
          <li ><div onClick={this.toggleChoice.bind(this)} class={"circle-20 hovered-circle" + selectedCircle}>20</div></li> 
          <li ><div onClick={this.toggleChoice.bind(this)} class={"circle-30 hovered-circle" + selectedCircle}>30</div></li> 
          <li ><div onClick={this.toggleChoice.bind(this)} class={"circle-40 hovered-circle" + selectedCircle}>40</div></li> 
         </ul> 

         </div> 
        </div> 

      </div> 
     </div> 
    ); 
    } 
} 

Answer 1

In Ihrem Fall ausgewählt werden selectedCircle hat die gleicher Wert für alle Listenelemente. Wenn Sie auf eines der Listenelemente klicken, ändern sich auch die anderen selectedCircle.

So benötigen Sie für jedes Listenelement das unterschiedliche Stück Zustand.

Sie können so etwas wie dies versuchen:

zuerst Ihr Zustand ändern:

braucht

this.state = { 
    selectedCircle: {}, 
}; 

Ihre toggleChoice Funktion, auf der Liste Element, das Sie wissen geklickt. Sie können es so etwas ändern:

toggleChoice(name, event) { 
    let selected = this.state.selectedCircle; 
    selected = {}; 
    let selectedCircles = selected[name] == "selected" ? "" : "selected"; 
    selected[name] = selectedCircles; 
    this.setState({selectedCircle: selected}); 
} 

Dann in Ihrem machen Sie das entsprechende Stück Zustand zu jedem Listeneintrag hinzufügen müssen. Ändern Sie Ihre Renderfunktion in etwas wie:

render() { 

return (
    <div className="container" id="order-layout"> 
     <div className="row"> 

       <div className="card-panel white"> 
        <div className="center"> 
        <h5>Your Order</h5> 
        <p className="margin-top-30 bold">Choose Pizza size in cm</p> 
        <ul className="margin-top-30"> 
         <li ><div onClick={this.toggleChoice.bind(this, "first")} className={"circle-20 hovered-circle " + this.state.selectedCircle["first"]}>20</div></li> 
         <li ><div onClick={this.toggleChoice.bind(this, "second")} className={"circle-30 hovered-circle " + this.state.selectedCircle["second"]}>30</div></li> 
         <li ><div onClick={this.toggleChoice.bind(this, "third")} className={"circle-40 hovered-circle " + this.state.selectedCircle["third"]}>40</div></li> 
        </ul> 

        </div> 
       </div> 

     </div> 
    </div> 
); 

Und voilà, das sollte funktionieren. Hier ist jsfiddle.

Hoffe, das hilft.