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

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

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

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

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>
   )
}

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

2 个答案: