mode在table中为每个item打开

Question

问题如主题所述。目标是打开一个模态，并使用item。imdbID获取数据。就像现在一样，为表中的每个条目打开一个模态，并且为每个条目发送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;

DetailedViewModal.js

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

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

Answer 1

Issue

您正在使用单个切换状态来切换all的可见性情态动词

<标题>

解决方案为你想要切换可见性的模式存储一个传递的id属性。

useModal:

更新到切换回null，如果id匹配关闭模式，或切换到新的id。注意:toggle是一个curry函数，所以你不需要创建匿名回调函数来传递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>