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。

希望这有帮助。

切换所选列表项react.js的背景颜色

1 个答案: