在 React 中使用模态的项目列表上打开模态

Question

我有一个项目列表，列表中的每个项目都有一个打开模式的按钮。

我的问题是我认为我做错了什么，因为当我点击“打开模式”时它不起作用。我已经让它工作了，但是它同时打开了所有模式，我找不到如何修复它。

这里是我的沙箱，包含所有代码：https://codesandbox.io/s/modal-on-list-sjw7u?file=/src/components/TopBar.tsx

我的项目列表位于沙盒的 class MetricsDetailsPage 中，我在此 class 上称为模态的部分是这样完成的：

<FiltersAddition
    dimension={dimension}
    isModalOpen={isShowing}
    toggle={toggle}
/>
<Button onClick={toggle}> Instantiate </Button>

我的问题是，如果您在我的代码沙箱上打开“https://sjw7u.csb.app/metric/test”并单击“实例化”按钮，您将看到模式被复制列表中的每个项目，我只想显示被点击项目的模态（一次一个）。

Answer 1

以后，宁愿在问题中包含相关的、有问题的代码。

问题是您在每次迭代中都包含模态，并且没有父状态来控制一次显示哪个模态。

我建议您修改挂钩并从共享父状态使用它：

import { useState } from 'react';
import { IDimension } from '../model/metric';

const useModal = () => {
  // store which has been selected
  const [selected, setSelected] = useState<IDimension>();
  const [isShowing, setIsShowing] = useState<boolean>(false);

  const open = (dimension: IDimension) => {
    setSelected(dimension);
    setIsShowing(true);
  };

  const close = () => {
    setSelected(null);
    setIsShowing(false);
  };

  return {
    isShowing,
    open,
    close,
    selected
  };
};

export default useModal;

然后将模态框移出循环：

          <TableBody>
            {metric?.dimensions.map((dimension) => (
              <TableRow key={dimension.name}>
                <TableCell>{dimension.name}</TableCell>
                <TableCell>{dimension.value_type}</TableCell>
                <TableCell>{dimension.doc ? dimension.doc : 'No description available'}</TableCell>
                <TableCell>
                  <Button onClick={() => open(dimension)}> Instantiate </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
       {/* outside the loop */}
        <FiltersAddition dimension={selected} isModalOpen={isShowing} close={close} />

Modified Codesandbox Demo

在 React 中使用模态的项目列表上打开模态

Open modal on a list of items with modals in React

modal-dialog

sandbox

typescript

reactjs