如何显示目标模态?

Question

如何显示目标模态？ 当我点击 Alex 时，我想显示 Alex，当我点击 Nick 时，需要显示 Nick。我该怎么做，任何想法吗？

import React, { useState } from "react";
import Modal from "react-modal";
let data = [
{ name: "Alex", age: 25 },
{ name: "Nick", age: 19 },
];
export const Test = () => {
const [showModal, displayModal] = useState(false);
const [data, setData] = useState(null);
const test = (nm) => {
if (Object.keys(nm).length) {
setData(nm);
}
displayModal(!showModal);
};
return (
<div>
<div onClick={test}>
{data.map((nm) => (
<div key={nm.id}>
<span>{nm.name}</span>
</div>
))}
</div>
<Modal isOpen={showModal} onRequestClose={() => displayModal(false)}>
<div>
<p>{data.name}</p>
</div>
</Modal>
</div>
);
};

Answer 1

在文本函数中获取数据，然后将其作为道具传递给您的模态。

const [modalData, setModalData] = useState(null);
const [showModal, displayModal] = useState(false);
const test = nm => {
if(Object.keys(nm).length) { setModalData(nm); }
displayModal(!showModal);
};
{data.map((nm) => (
<div key={nm.id} onClick={() => test(nm)}>
<span>{nm.name}</span>
</div>
))}
<HelpModal isOpen={showModal} onRequestClose={() => displayModal(false)}>
<p>{modalData.name}</p>
<p>{modalData.age}</p>
</HelpModal>

Answer 2

在这里，您可以使用解决方案

import React, { useState } from "react";
import Modal from "react-modal";
let data = [
{ name: "Alex", age: 25 },
{ name: "Nick", age: 19 },
];
export const Test = () => {
const [showModal, displayModal] = useState(false);
const [selectedData, setSelectedData] = useState(null);
const openModal = nm => {
if (Object.keys(nm).length) {
setSelectedData(nm);
}
displayModal(!showModal);
};

const closeModal = () => {
displayModal(!showModal);
setSelectedData(null);
};

return (
<div>
<div>
{data.map((nm) => (
<div key={nm.id} onClick={() => openModal(nm}>
<span>{nm.name}</span>
</div>
))}
</div>
<HelpModal isOpen={showModal} onRequestClose={closeModal}>
<HelpDialogStyle>
{
selectedData &&
<p>{selectedData.name}</p>
}
</HelpDialogStyle>
</HelpModal>
</div>
);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>