javascript - 切换一个列表项而不是整个列表

Question

我正在制作一张列出广播电台的卡片，当您单击某个电台时，该列表项的图片就会下拉。我从 json 中提取的所有数据。

我尝试在 toggle.js 和 app.js 文件中构建列表

app.js-- 带切换功能的 div(全部位于卡片内..许多 div)

           <div class="card-trip-infos">
              <div>
               <Toggle />
              </div>
              <img class="card-trip-user avatar-bordered"/>
            </div>

toggle.js 渲染 block :

    state = {
        on: false,
    }
    toggle = () => {
      this.setState({
      on: !this.state.on
      })
    }
    render() {
        return (
          <ul>
              <div>
                  <p>{PostData.radios[0].name}</p>
                  {PostData.radios.map((postDetail, index) => {
                    return <div>
                    <li onClick={this.toggle}>
                      <span id='radioName'>{postDetail.name}</span> <span id='frequency'>{postDetail.frequency}</span>

                    </li>
                    {
                      this.state.on &&  <img src='imagesrc'></img>
                    }


                    </div>
                  })}
              </div>

          </ul>
        )
      }
    }

我不知道到底出了什么问题，但我希望能够单独切换每个列表行的图片。我很困惑在哪里迭代我的 json 以及在哪里插入所有内容。

非常感谢!!

Answer 1

由于我们不知道您的切换功能和所有组件，因此我们无法提出准确的建议，但为了在此处执行您想要的操作(只需切换所选项目)，您有两种不同的方法。

1. 您可以将选定状态保留在组件本身中。

class App extends React.Component {
  state = {
    cards: [
      { id: 1, name: "foo" },
      { id: 2, name: "bar" },
      { id: 3, name: "baz" }
    ],
  };

  render() {
    const { cards } = this.state;
    return (
      <div>
        {cards.map(card => (
          <Card
            key={card.id}
            card={card}
          />
        ))}
      </div>
    );
  }
}

class Card extends React.Component {
  state = {
    selected: false
  };

  handleSelect = () =>
    this.setState(state => ({
      selected: !state.selected
    }));

  render() {
    const { card } = this.props;
    return (
      <div
        className={this.state.selected ? "selected" : ""}
        onClick={this.handleSelect}
      >
        {card.id}-{card.name}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

.selected {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

您可以在父组件中保留选定状态。

class App extends React.Component {
  state = {
    cards: [
      { id: 1, name: "foo" },
      { id: 2, name: "bar" },
      { id: 3, name: "baz" }
    ],
    selected: {}
  };

  handleSelect = id =>
    this.setState(state => ({
      selected: { ...state.selected, [id]: !state.selected[id] }
    }));

  render() {
    const { cards, selected } = this.state;
    return (
      <div>
        {cards.map(card => (
          <Card
            key={card.id}
            card={card}
            handleSelect={this.handleSelect}
            selected={selected[card.id]}
          />
        ))}
      </div>
    );
  }
}

const Card = ({ card, handleSelect, selected }) => {
  const handleClick = () => handleSelect(card.id);
  return (
    <div className={selected ? "selected" : ""} onClick={handleClick}>
      {card.id}-{card.name}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

.selected {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />