선택한 목록 항목의 배경색을 전환합니다. react.js

Question

목록 항목 중 하나를 클릭 할 때 원하는 항목을 적용하려면 선택한 클래스를 선택하고 다시 클릭하면 기본적으로 제거되기를 원합니다. 토글 기능이 있지만, 3 개 목록 항목에 발생하는, 그래서 하나를 클릭하면, 모든 선택 얻을,하지만 난 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

선택할 수 있습니다 원하는 모든 목록 항목에 대해 동일한 값. 목록 항목 중 하나를 클릭하면 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입니다.

희망이 도움이됩니다.