表格中的模态为表格中的每个项目打开

如何解决表格中的模态为表格中的每个项目打开

主题中所述的问题。目标是打开一个模态，并使用 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()} /> 
    </>
)

非常感谢任何能帮助我们完成这项工作的好建议。

解决方法

问题

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

解决方案

为要切换可见性的模态存储传递的 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>