Блог

Я написал эту функцию, которая отображает изображения из массива. Это делается в Next.js с помощью react-bootstrap. Эта функция работает так, как я хочу, но я бы хотел, чтобы у каждого изображения была onClick функция, которая сама открывается в новое модальное окно.

Я использую react-bootstrap, и у них есть модальный компонент, который работает именно так, как я хочу, поэтому мне не нужна помощь с CSS или созданием реального модального окна, мне просто нужно выяснить, как сделать так, чтобы каждое отображаемое изображение само предназначалось для источника изображения во всплывающем окнеокно.

 export default function Illustration() {
  let armArray = ['arms_1', 'arms_2', 'arms_3', 'arms_4', 'arms_5', 'arms_6','arms_7'].map(image => {
    return (
      <img 
        key={image}
        src={`/illus_assets/anatomy/${image}@0.1x.png`}
        className={styles.imgIllus}
      />
    )
  });

  return (
    <Layout>
      <Col xs={12} sm={{ span: 10, offset: 1 }} lg={{ span: 10, offset: 2 }}>
        <Row>
          {armArray}
        </Row>
        <Row>
        
        </Row>
      </Col>
    </Layout>
  );
}
 

Вы можете создать функцию onClick для изображения и передать объект event. Создайте единый общий модал, используя react-bootstrap с заполнителем для изображений.
например: <img src={imgUrl} alt="modal-image">

И каждый раз, когда нажимается изображение, получайте img src из event.target и передавайте его в качестве реквизита или устанавливайте значение состояния, откуда вы можете использовать это значение в модальном качестве imgUrl .

Как вы сказали, вам не нужны никакие модальные html или css, я не объясняю их здесь.

Надеюсь, это даст вам ясность

 export default function Illustration() {
    const [modalImgUrl, setModalImgUrl] = useState(null);
    
    const showImgModal = e => {
        setModalImgUrl(e.target.src)
    }
    
    let armArray = ['arms_1', 'arms_2', 'arms_3', 'arms_4', 'arms_5', 'arms_6','arms_7'].map(image => {
        return (
            <img 
                key={image} 
                src={`/illus_assets/anatomy/${image}@0.1x.png`}
                className={styles.imgIllus} 
                onClick={showImgModal}
            />
        )
    });
    return (
        <Layout>
            <Col xs={12} sm={{ span: 10, offset: 1 }} lg={{ span: 10, offset: 2 }}>
                <Row>
                    {armArray}
                </Row>
                <Row>

                </Row>
            </Col>  
        </Layout>
    );
}