如何使每个图像成为模态 window 的目标？

Question

我写了这个 function 来映射数组中的图像。 这是在 Next.js 中使用 react-bootstrap 完成的。 This function is working how I want it to, but I'd like to have each image to have an onClick function that opens itself into a new modal window.

我正在使用 react-bootstrap，他们有一个 Modal 组件，它完全按照我想要的方式工作，所以我真的不需要 CSS 的帮助或创建实际的模态 window，我只需要弄清楚如何制作弹出窗口 window 中的图像源的每个映射图像目标本身。

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

Answer 1

您可以在图像上创建 onClick 函数并传递事件 object。 使用带有图像占位符的 react-bootstrap 创建单个通用模态。
例如： <img src={imgUrl} alt="modal-image">

每次单击图像时，从event.target获取 img src 并将其作为道具传递或设置为 state 值，您可以在 Modal 中将此值用作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>
    );
}