Reactjs 在React中一次只允许打开多个模式对话框中的一个

我尝试用React 17创建一个小的bug跟踪应用程序。我有一个BugComponent，用户可以通过单击相关图标并从一个小弹出对话框中选择值，轻松设置优先级、状态、系统和一些其他属性。这意味着每个bug有5-6个小模式对话框，默认情况下页面上有20个bug

在我当前的实现中，我有一个用于显示和更改优先级的组件，如下所示：

export const PrioritySelector = ({priority}) => {

    const [open, setOpen] = useState(false);
    const [prio, setPrio] = useState(priority);

    const handleOnClick = () => {
        setOpen(!open);
    }

    const handleOnSelect = (selectedPriority) => {
        setPrio(selectedPriority);
        setOpen(false);
    }

    return (
        <div>
            <PriorityIcon priority={prio} onClick={handleOnClick} />
            <PriorityOptionSelector open={open} onSelect={handleOnSelect} originalValue={prio}/>
        </div>
    );
}

export const BugComponent = ({bug}) => {

    return (
        <div className="bug">
            <StatusSelector status={bug.status} />
            <div>{bug.text}</div>
            <PrioritySelector priority={bug.priority} />
            <DateSelector plannedEndDate={bug.plannedEndDate} />
            <CommentIcon numberOfComments={bug.commentCount} />
        </div>
    )
}

const NO_MODAL_EXPANDED = {bugId: "", componentType: ""};
const [expandedItem, setExpandedItem] = useState(NO_MODAL_EXPANDED);
    
    // Then you pass these props down to the BugComponent:
<BugComponent
  bug={bug}
  hasExpandedItem={expandedItem.bugId === bug.bugId}
  expandedItemType={expandedItem.componentType}
  setExpandedItem={setExpandedItem}
  closeModal={() => setExpandedItem(NoModalExpanded)}
/>;

这是可行的，但问题如下： 如果我点击图标打开对话框，然后点击同一个bug的其他图标，或者甚至是另一个bug的图标，而没有选择一个值，那么这个模式对话框将保持打开状态。因此，一次可以打开很多对话框

在打开新对话框之前，我会使用vanilla JavaScript编写如下内容：

document.querySelectorAll('.modal-selector.open').classList.remove('open');

---

如何在React中打开新对话框之前关闭对话框？

您希望在BugComponent上方的状态变量中保留有关当前打开的模式的信息

执行如下状态变量：

export const PrioritySelector = ({priority}) => {

    const [open, setOpen] = useState(false);
    const [prio, setPrio] = useState(priority);

    const handleOnClick = () => {
        setOpen(!open);
    }

    const handleOnSelect = (selectedPriority) => {
        setPrio(selectedPriority);
        setOpen(false);
    }

    return (
        <div>
            <PriorityIcon priority={prio} onClick={handleOnClick} />
            <PriorityOptionSelector open={open} onSelect={handleOnSelect} originalValue={prio}/>
        </div>
    );
}

export const BugComponent = ({bug}) => {

    return (
        <div className="bug">
            <StatusSelector status={bug.status} />
            <div>{bug.text}</div>
            <PrioritySelector priority={bug.priority} />
            <DateSelector plannedEndDate={bug.plannedEndDate} />
            <CommentIcon numberOfComments={bug.commentCount} />
        </div>
    )
}

const NO_MODAL_EXPANDED = {bugId: "", componentType: ""};
const [expandedItem, setExpandedItem] = useState(NO_MODAL_EXPANDED);
    
    // Then you pass these props down to the BugComponent:
<BugComponent
  bug={bug}
  hasExpandedItem={expandedItem.bugId === bug.bugId}
  expandedItemType={expandedItem.componentType}
  setExpandedItem={setExpandedItem}
  closeModal={() => setExpandedItem(NoModalExpanded)}
/>;

const NO_MODAL_EXPANDED={bugId:，componentType:：}；
const[expandedItem，setExpandedItem]=useState（无模式扩展）；
//然后将这些道具传递给BugComponent：
setExpandedItem（NoModalExpanded）}
/>;

在BugComponent中，您可以执行以下操作：

export const BugComponent = ({
  bug,
  hasExpandedItem,
  expandedItemType,
  setExpandedItem,
  closeModal
}) => {
  const isExpanded = (name) => hasExpandedItem && expanedItemType === name;
  return (
    <div className="bug">
      <StatusSelector
        status={bug.status}
        isExpanded={isExpanded("status")}
        closeModal={closeModal}
        expandItem={() => setExpandedItem({bugId: bug.bugId, componentType: "status"})}
      />
      <div>{bug.text}</div>
      <PrioritySelector
        priority={bug.priority}
        isExpanded={isExpanded("priority")}
        closeModal={closeModal}
        expandItem={() => setExpandedItem({bugId: bug.bugId, componentType: "priority"})}
      />
      <DateSelector
        plannedEndDate={bug.plannedEndDate}
        isExpanded={isExpanded("date")}
        closeModal={closeModal}
        expandItem={() => setExpandedItem({bugId: bug.bugId, componentType: "date"})}
      />
      <CommentIcon
        numberOfComments={bug.commentCount}
        isExpanded={isExpanded("comment")}
        closeModal={closeModal}
        expandItem={() => setExpandedItem({bugId: bug.bugId, componentType: "comment"})}
      />
    </div>
  );
};

导出常量BugComponent=({
缺陷
哈斯迪坦，
expandedItemType，
SetEditem，
闭合模态
}) => {
const isExpanded=（name）=>hasExpandedItem&&expanedItemType==name；
返回(
setExpandedItem（{bugId:bug.bugId，componentType:“status”}）
/>
{bug.text}
setExpandedItem（{bugId:bug.bugId，componentType:“priority”}）
/>
setExpandedItem（{bugId:bug.bugId，componentType:“date”}）
/>
setExpandedItem（{bugId:bug.bugId，componentType:“comment”}）
/>
);
};

在模态组件中，您可以执行以下操作：

export const PrioritySelector = ({
  priority,
  isExpanded,
  expandItem,
  closeItem,
}) => {
  const [prio, setPrio] = useState(priority);

  const handleOnClick = () => {
    if (isExpanded) {
      closeItem();
    } else {
      expandItem();
    }
  };

  const handleOnSelect = (selectedPriority) => {
    setPrio(selectedPriority);
    closeItem();
  };

  return (
    <div>
      <PriorityIcon priority={prio} onClick={handleOnClick} />
      <PriorityOptionSelector
        open={isExpanded}
        onSelect={handleOnSelect}
        originalValue={priority}
      />
    </div>
  );
};

export const PrioritySelector=({
优先，
我扩展了，
扩展项，
结束项目，
}) => {
const[prio，setPrio]=使用状态（优先级）；
const handleOnClick=（）=>{
如果（扩展）{
closeItem（）；
}否则{
expandItem（）；
}
};
const handleOnSelect=（selectedPriority）=>{
setPrio（selectedPriority）；
closeItem（）；
};
返回(
);
};

---

通读一遍，看看你是否理解。你需要了解的核心是：你想用尽可能少的变量来表达状态。你唯一想知道的是：哪个组件（如果有的话）被扩展了？不要将此状态分布在许多组件上，而是将状态保留在父组件中，即最小公分母。

是否始终最多只能打开一个PrioritySelector？始终最多只能打开一个Selector。因此，如果用户单击StatusSelector，那么PrioritySelector应该关闭。我认为您需要每个PrioritySelector的状态数组来处理它。或者您可以编写自己的模式提供程序来处理它。看到这个：@Vmxes，值

优先级

对每一个都是唯一的吗？@hellogodnight

优先级

对于任何bug实体都可以是低/正常/高。谢谢，我明白了，它工作得很好！作为一个React新手，我只是想知道如果我使用上下文会怎么样。当然，你可以使用上下文或redux而不是传递道具。