切換所選列表項的背景顏色react.js

Question

當我單擊列表項之一時我想要執行的操作，我希望選擇所選的類別，當我再次單擊時，我希望將其刪除，因此基本上是一個切換功能，但它碰巧出現在所有三個列表項中，因此，如果我單擊一個，則全部選中，但是我想要這樣，一次只能選擇一個

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 。

希望這可以幫助。