переключить цвет фона выбранного элемента списка response.js

Question

что я хочу сделать, когда я нажимаю на один из элементов списка, я хочу, чтобы выбранный класс был применен, и когда я нажимаю снова, я хочу, чтобы он был удален, поэтому в основном функция переключения, но это случается со всеми 3 элементов списка, так что если я нажимаю на один, все выбран, но я хочу, так что только один может быть выбран в то время

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

в вашем случае selectedCircle имеет одинаковое значение для всех элементов списка. Если вы нажмете на один из элементов списка 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.

Надеюсь, это поможет.