问寻找更好的解决方案
EN

Stack Overflow用户

提问于 2022-03-09 13:59:47

回答 1查看 25关注 0票数 0

所以我有一个有12个按钮的网站。其中6个按钮需要启动一个带有不同视频的弹出窗口，6个按钮需要启动一个带有6个图像的弹出窗口。

现在，我正在试验一个显示图像的弹出窗口。这很容易，我设置了一个州

const [showModal, setShowModal] = useState(false);

然后我有一个按钮来设置显示onClick，然后显示一个模型-例如

<button className="buttonGeneral" onClick={()=>setShowModal(true)}>SUMMARY11</button> <ModalReact showModal={showModal} onClose={() => setShowModal(false)} image={props.image_1} size='med'/>

考虑到这一点，我想我需要两种不同类型的调制解调器，一种用于视频，一种用于图像。但是有了上面的方法，我需要有12个不同状态的useState。这似乎有点不对，但我想不出别的办法了。

为了完整起见，下面是ModalReact组件

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import '../styles/react-bs.css';

function ModalReact({showModal = false, onClose = () =>{}, image, size}) {
  console.log("im ", image)
  return (
    <Modal
      size={size}
      show={showModal} 
      onHide={onClose}
      backdrop="static"
      keyboard={false}    
      // dialogClassName="videoPopup"    
    >

    <Modal.Body><img src={image} alt="lala"></img></Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={onClose}>
        Close
      </Button>
    </Modal.Footer>
  </Modal>
  )
}

export default ModalReact

reactjs

回答 1

Stack Overflow用户

发布于 2022-05-04 22:02:30

您需要为所有按钮维护不同的状态。我建议编写一个自定义组件，它的状态保持在同一个组件中，这样它就只能用于该组件了。在此基础上，我们可以从它的状态变量打开一个模态。

export default function ModalReact({ itemNum }) {
  const [showModal, setShowModal] = useState(false);
  const handleClose = () => setShowModal(false);
  const handleShow = () => setShowModal(true);
  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal {itemNum}
      </Button>
      <div style={{ display: "block", width: 700, padding: 30 }}>
        <Modal show={showModal} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading {itemNum}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            Woohoo, you're reading this text in a modal! {itemNum}
            {itemNum > 6 ? "image" : "video"}
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="primary" onClick={handleClose}>
              Save Changes
            </Button>
          </Modal.Footer>
        </Modal>
      </div>
    </>
  );
}

我们可以从任何组件中使用。你说你有12个按钮，所以迭代并显示所有这些按钮。我使用了一个简单的数组和迭代来显示所有的按钮。

return (
  <div className="container">
    {Array.from({ length: 12 }, (_, i) => i + 1).map((item) => (
      <CustomModal itemNum={item} />
    ))}
  </div>
);