reactjs React/Next.js，打开对话框后页面滚动冻结

kmpatx3s 于 2022-11-22 发布在 React

关注(0)|答案(1)|浏览(130)

所以基本上当用户点击一个图像时，我将图像的细节显示为一个模态/对话框。但是在对话框关闭后，屏幕滚动冻结。屏幕上的东西可以工作，但是我不能向下滚动并访问其他元素。有什么想法我可以调试吗？
我觉得这是因为不知何故模态是禁用我的滚动条。
下面是我的对话框代码

import React from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import {XIcon} from '@heroicons/react/solid'
import {useRecoilState} from 'recoil'
import {openState} from '../../../atoms/modalAtom'

const product = {
  name: "Women's Basic Tee",
  price: '$32',
  rating: 3.9,
  reviewCount: 512,
  href: '#',
  imageSrc: 'https://tailwindui.com/img/ecommerce-images/product-page-01-featured-product-shot.jpg',
  imageAlt: "Back of women's Basic Tee in black.",
  colors: [
    { name: 'Black', bgColor: 'bg-gray-900', selectedColor: 'ring-gray-900' },
    { name: 'Heather Grey', bgColor: 'bg-gray-400', selectedColor: 'ring-gray-400' },
  ],
  sizes: [
    { name: 'XXS', inStock: true },
    { name: 'XS', inStock: true },
    { name: 'S', inStock: true },
    { name: 'M', inStock: true },
    { name: 'L', inStock: true },
    { name: 'XL', inStock: true },
    { name: 'XXL', inStock: false },
  ],
}

export function DesignQuickView ({design}) {
  const [open, setOpen] = useRecoilState(openState)

  return (
    <Transition.Root show={open} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={() => setOpen(false)}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="hidden fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity md:block" />
        </Transition.Child>

        <div className="fixed z-10 inset-0 overflow-y-auto">
          <div className="flex items-stretch md:items-center justify-center min-h-full text-center md:px-2 lg:px-4">
            {/* This element is to trick the browser into centering the modal contents. */}
            <span className="hidden md:inline-block md:align-middle md:h-screen" aria-hidden="true">
              &#8203;
            </span>
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
              enterTo="opacity-100 translate-y-0 md:scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 translate-y-0 md:scale-100"
              leaveTo="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
            >
              <Dialog.Panel className="flex text-base text-left transform transition w-full md:max-w-2xl md:px-4 md:my-8 lg:max-w-4xl">
                <div className="w-full relative flex items-center bg-white px-4 pt-14 pb-8 overflow-hidden shadow-2xl sm:px-6 sm:pt-8 md:p-6 lg:p-8">
                  <button
                    type="button"
                    className="absolute top-4 right-4 text-gray-400 hover:text-gray-500 sm:top-8 sm:right-6 md:top-6 md:right-6 lg:top-8 lg:right-8"
                    onClick={() => setOpen(false)}
                  >
                    <span className="sr-only">Close</span>
                    <XIcon className="h-6 w-6" aria-hidden="true" />
                  </button>

                  <div className="w-full grid grid-cols-1 gap-y-8 gap-x-6 items-start sm:grid-cols-12 lg:items-center lg:gap-x-8">
                    <div className="aspect-w-2 aspect-h-3 rounded-lg bg-gray-100 overflow-hidden sm:col-span-4 lg:col-span-5">
                      <img src={design.url} alt={design.name} className="object-center object-cover" />
                    </div>
                    <div className="sm:col-span-8 lg:col-span-7">
                      <h2 className="text-xl font-medium text-gray-900 sm:pr-12">Hoodie</h2>

                      <section aria-labelledby="information-heading" className="mt-1">
                        <h3 id="information-heading" className="sr-only">
                          Product information
                        </h3>

                        <p className="font-medium text-gray-900">{product.price}</p>

                      
                      </section>

                      <section aria-labelledby="options-heading" className="mt-8">
                        <h3 id="options-heading" className="sr-only">
                          Product options
                        </h3>

                        <form>
                          {/* Color picker */}
                          <div>
                            <h4 className="text-sm font-medium text-gray-900">Color</h4>

                            {/* <RadioGroup value={selectedColor} onChange={setSelectedColor} className="mt-2">
                              <RadioGroup.Label className="sr-only">Choose a color</RadioGroup.Label>
                              <div className="flex items-center space-x-3">
                                {product.colors.map((color) => (
                                  <RadioGroup.Option
                                    key={color.name}
                                    value={color}
                                    className={({ active, checked }) =>
                                      classNames(
                                        color.selectedColor,
                                        active && checked ? 'ring ring-offset-1' : '',
                                        !active && checked ? 'ring-2' : '',
                                        '-m-0.5 relative p-0.5 rounded-full flex items-center justify-center cursor-pointer focus:outline-none'
                                      )
                                    }
                                  >
                                    <RadioGroup.Label as="span" className="sr-only">
                                      {color.name}
                                    </RadioGroup.Label>
                                    <span
                                      aria-hidden="true"
                                      className={classNames(
                                        color.bgColor,
                                        'h-8 w-8 border border-black border-opacity-10 rounded-full'
                                      )}
                                    />
                                  </RadioGroup.Option>
                                ))}
                              </div>
                            </RadioGroup> */}
                          </div>

                          {/* Size picker */}
                          <div className="mt-8">
                            <div className="flex items-center justify-between">
                              <h4 className="text-sm font-medium text-gray-900">Size</h4>
                              <a href="#" className="text-sm font-medium text-indigo-600 hover:text-indigo-500">
                                Size guide
                              </a>
                            </div>

                            {/* <RadioGroup value={selectedSize} onChange={setSelectedSize} className="mt-2">
                              <RadioGroup.Label className="sr-only">Choose a size</RadioGroup.Label>
                              <div className="grid grid-cols-7 gap-2">
                                {product.sizes.map((size) => (
                                  <RadioGroup.Option
                                    key={size.name}
                                    value={size}
                                    className={({ active, checked }) =>
                                      classNames(
                                        size.inStock
                                          ? 'cursor-pointer focus:outline-none'
                                          : 'opacity-25 cursor-not-allowed',
                                        active ? 'ring-2 ring-offset-2 ring-indigo-500' : '',
                                        checked
                                          ? 'bg-indigo-600 border-transparent text-white hover:bg-indigo-700'
                                          : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50',
                                        'border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1'
                                      )
                                    }
                                    disabled={!size.inStock}
                                  >
                                    <RadioGroup.Label as="span">{size.name}</RadioGroup.Label>
                                  </RadioGroup.Option>
                                ))}
                              </div>
                            </RadioGroup> */}
                          </div>

                        </form>
                      </section>
                    </div>
                  </div>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
  )
}

export default DesignQuickView

中的每一个
下面是我如何调用模式/对话框。

const Design = ({design}) => {

    const [open, setOpen] = useRecoilState(openState)

    
      return( 

      //Wrapping the image in a card
        <div>
                <div >
                    <img className= "inline-block h-14 w-14 rounded-md " 
                         src={design.url} 
                         alt="Custom design"
                         onClick={()=>setOpen(true)}
                         
                    />

                </div>
                <DesignQuickView design= {design}/>

        </div>
            )
}

export default Design

格式
我想这是滚动条。任何线索上，我可以调试？

reactjs

来源：https://stackoverflow.com/questions/72932074/react-next-js-page-scroll-freezing-after-opening-dialog-box

1条答案

按热度按时间

dwthyt8l1#

我遇到了同样的问题，在关闭模态后，滚动停止在主页上工作。

- 问题： * * 我呈现了一个列表，其中每个条目都有一个打开模态的按钮，并且我已经将模态放在了该列表中。

const [isOpen, setIsOpen] = useState(false);
const data = [
    // My data was an array of objects,
    // where each object contained position data
]

const closeModal = () => {
        setIsOpen(false);
    };

const openModal = () => {
    setIsOpen(true);
};

<div>
    {data.map((position) => (
        <button onClick={openModal}>Open Modal</button>
        <MyModal positionData={position} /> // <--------- Problem!
    ))}
</div>

中的每一个

- 解决方案： * * 将 modal 从列表中移出，并创建一个状态变量，该变量将在 openModal 和 closeModal 函数中更新：

const [selectedPosition, setSelectedPosition] = useState(null);
const [isOpen, setIsOpen] = useState(false);

const data = [
    // My data was an array of objects,
    // where each object contained position data
]

const closeModal = () => {
        setSelectedPosition(null);
        setIsOpen(false);
    };

const openModal = (position) => {
    setSelectedPosition(position);
    setIsOpen(true);
};

<div>
    {data.map((position) => (
        <button onClick={() => openModal(position)}>Open Modal</button>
    ))}
    <MyModal positionData={selectedPosition} /> // <-------- Solved!
</div>

格式

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs React/Next.js，打开对话框后页面滚动冻结

1条答案

相关问题

热门标签

最新问答