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