【问题标题】：Modal in table is opened for every item in table为表格中的每个项目打开表格中的模态
【发布时间】：2021-02-23 06:12:02
【问题描述】：

如主题中所述的问题。目标是打开一个模式，并使用 item.imdbID 来获取数据。就像现在一样，为表格中的每个条目打开一个模式，并且为每个条目发送 id 属性。

const { toggle, visible } = useModal();


<tbody>
    {items.map((item, i) => (
        <tr key={i}>
            <MTd>{item.Title}</MTd>
            <MTd>{item.Year}</MTd>
            <MTd>{item.imdbID}</MTd>
            <MTd>{item.Type}</MTd>
            <MTd><button onClick={toggle}>Detaljer</button>
                <DetailedViewModal visible={visible} toggle={toggle} id={item.imdbID} />
            </MTd>
        </tr>
    ))}
</tbody>

我知道当函数驻留在同一个文件中时可以执行 <button onClick={e => testClick(item.imdbID)}>Details</button>，但不确定如何使用模态处理。

模态是定制的；使用Modal.js：

const useModal = () => {
  const [visible, setVisible] = useState(false);
  function toggle() {
    setVisible(!visible);    
  }
  return {toggle, visible}
};

Modal.js

const Modal = ({ visible, toggle, body }) => visible ? ReactDOM.createPortal(
    <div className="modal">
        <div className="modal-pop" role="dialog" aria-modal="true">
            <div>{body}</div>
            <button type="button" onClick={toggle}>Close</button>
        </div>
        <div className="modal-overlay"></div>
    </div>, document.body
) : null;

DetailedViewModal.js

return (
    <>
    <Modal visible={visible} toggle={toggle} body={modalBody()} /> 
    </>
)

非常感谢任何使这项工作的好建议。

【问题讨论】：

标签： javascript reactjs html-table modal-dialog

【解决方案1】：

问题

您正在使用单个切换状态来切换所有模式的可见性。

解决方案

为要切换可见性的模式存储传递的id 属性。

使用模式：

如果 id 匹配关闭模式，则更新为切换回 null，或者切换到新的 id。 注意： toggle 是一个柯里化函数，因此在附加回调时，您无需创建匿名回调函数来传递 id。

const useModal = () => {
  const [visibleId, setVisible] = useState(null);
  const toggle = id => () => setVisible(visibleId => visibleId === Id ? null : id);
  return {toggle, visibleId}
};

组件代码：

将item.imdbID 或null 传递给toggle 回调处理程序，检查当前item.imdbID 是否等于当前visibleId 值以设置模式的可见性。

const { toggle, visibleId } = useModal();

...

<tbody>
  {items.map((item, i) => (
    <tr key={i}>
      <MTd>{item.Title}</MTd>
      <MTd>{item.Year}</MTd>
      <MTd>{item.imdbID}</MTd>
      <MTd>{item.Type}</MTd>
      <MTd>
        <button
          onClick={toggle(item.imdbID)} // <-- pass id to handler to open (or close)
        >
          Detaljer
        </button>
        <DetailedViewModal
          visible={visibleId === item.imdbID} // <-- check id match for opening modal
          toggle={toggle(null)} // <-- pass null to close
          body={{ /* ... whatever the body is ... */ }}
        />
      </MTd>
    </tr>
  ))}
</tbody>

【讨论】：