Javascript 为表中的每个项目打开表中的模式

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

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;

const-Modal=（{visible，toggle，body}）=>visible？ReactDOM.createPortal(
{body}
接近
，document.body
)：null；

DetailedViewModal.js

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

返回(
)

非常感谢您对这项工作提出的任何好建议。

问题 您正在使用单个切换状态切换所有模态的可见性

解决方案 为要切换可见性的模式存储已传递的

id

属性

useModal：

如果id匹配，则更新以切换回

null

，关闭模式，或切换到新的

id

注意：

切换

是一个常用函数，因此在附加回调时，无需创建匿名回调函数来传递

id

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

组件代码：

将

item.imdbID

或

null

传递给

toggle

回调处理程序，检查当前

项。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>

const{toggle，visibleId}=useModal（）；
...
{items.map（（item，i）=>(
{item.Title}
{项目年份}
{item.imdbID}
{item.Type}
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>