Question

我是编码的初学者。我正在创建我的图形设计师作品集。我已将所有投资组合内容（缩略图，客户端名称，描述...）放入JSON文件中名为“ portfolio”的数组中。数组中的每个项目都是一个不同的项目。我显示大量的缩略图，当我单击缩略图时，将打开一个包含项目详细信息的模式。

我在“作品集”数组上进行映射以显示画廊，这是可行的。但是当我打开模态时，它总是显示数组的最后一项。

import React from 'react';
import Modal from 'react-bootstrap/Modal';

class Portfolio extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      projectName: "",
      show: false
    };

    this.handleShow = () => {
      this.setState({ show: true });
    };

    this.handleClose = () => {
      this.setState({ show: false });
    };
  }

  componentDidMount() {
    fetch("https://api.myjson.com/bins/1cbaj5")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.portfolio
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const {error, isLoaded, items} = this.state;
    if (error) {
      return <div>Erreur : {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Chargement…</div>;
    } else {
      return (
        <div id="portfolio">
          <h2>Portfolio</h2>
          <ul className="portfolio-list">
            {items.map(item => (
              <li key={item.client}>
                <div className="vignette">

                  <button onClick={() => this.handleShow()}>
                    <h4>{item.client}</h4>
                    <div className="filtre"></div>
                    <img src={item.vignette} alt={item.titre} />
                  </button>

                  <Modal show={this.state.show} onHide={this.handleClose}>
                    <Modal.Header closeButton>
                      <h3>{item.client}</h3>
                    </Modal.Header>
                    <Modal.Body>
                      <p>{item.description}</p>
                    </Modal.Body>
                  </Modal>

                </div>
              </li>
            ))}
          </ul>
        </div>
      );
    }
  }
}

export default Portfolio;

我希望模式显示相应的项目详细信息。谢谢您的帮助。

Answer 1

您只需要1个模态并在item点击时动态传递数据，

<ul className="portfolio-list">
    {items.map(item => (
    <li key={item.client}>
        <div className="vignette">
            <button onClick={()=> this.handleShow(item)}> //Pass complete item object here
                <h4>{item.client}</h4>
                <div className="filtre"></div>
                <img src={item.vignette} alt={item.titre} />
            </button>
        </div>
    </li>
    ))}
    <Modal show={this.state.show} onHide={this.handleClose}> //Only one modal
        <Modal.Header closeButton>
            <h3>{this.state.activeItem.client}</h3>
        </Modal.Header>
        <Modal.Body>
            <p>{this.state.activeItem.description}</p>
        </Modal.Body>
    </Modal>
</ul>

现在，您可以在handleShow函数中将item设置为状态，

this.handleShow = (item) => {
   this.setState({activeItem:item}, ()=> this.setState({ show: true }));
};

使用callback显示模式，以确保activeItem最近点击过item。

初始状态

this.state = {
   error: null,
   isLoaded: false,
   items: [],
   projectName: "",
   show: false,
   activeItem:'' //new added
};

React-Bootstrap模态仅采用地图的最后一项

1 个答案: