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

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 渲染块：

    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" />

1. 您可以在父组件中保持选中状态。

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" />

Answer 2

为单个列表项创建一个组件，在那里有一个状态，它将保存一个布尔属性来判断图像是否要显示。渲染函数看起来像这样：

render (
  return (
    <li onClick="this.toggleShowImage()">
      <div> {props.data.name} </div>
      <div> {props.data.frequency} </div>
      {this.state.showImage ? <img src='imageUrl' /> : null }
     </li>
  )
)

然后在 toggle.js 中遍历您的数据并创建列表组件。渲染函数如下所示：

render() {
  return (
    <ul>
       {PostData.radios.map((postDetail, index) => {
          return <ListItem key={postDetail.name} data={postDetail} />
       })}
    
    </ul>
   )
}