選択したリストアイテムの背景色を切り替えるreact.js

Question

リストアイテムの1つをクリックしたときに何をしたいのですか？クラスを適用したいときに選択します。もう一度クリックすると削除されますトグル機能は、それがすべて3つのリスト項目に起こるので、私は1つをクリックすると、すべてが選択されますが、私はselectedCircleがあり、それがそのように一つだけのあなたのケースでは、時間

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

で選択することができますしたいですすべてのリスト項目に対して同じ値。リスト項目の1つをクリックすると、selectedCircleも変更されます。

したがって、すべてのリスト項目に対して異なる状態の部分が必要です。

あなたはこのような何かを試すことができます。

まずに自分の状態を変更します。

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

あなたtoggleChoice機能は、リスト項目をクリックしたかを知る必要があります。

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

レンダリングでは、適切な状態をすべてのリスト項目に追加する必要があります。レンダー機能を次のように変更してください：

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

そして、うまくいくはずです。ここにはjsfiddleがあります。

これが役に立ちます。