table 中的模式为 table 中的每个项目打开

Question

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

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>，但不确定如何使用模态处理它。

模态框是定制的； useModal.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;

详细视图Modal.js

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

非常感谢任何对完成这项工作的好的建议。

Answer 1

问题

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

解决方案

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

使用模式：

更新以切换回 null（如果 ID 匹配以关闭模式），或者切换到新的 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>

table 中的模式为 table 中的每个项目打开

Modal in table is opened for every item in table

javascript

html-table

modal-dialog

reactjs

问题

解决方案