React 如何通過單擊更改我的組件

Question

我有一個組件（ Card ），它在右上角有一個圖標。 當我單擊該圖標時，我希望將其更改為另一個組件（ EditCard ）以進行編輯。 Card 組件隨附在我的數據上的映射。 當我設置狀態進行更改時：

const [editVisible, seteditVisible] = useState(false);
.
.
.
{datax &&
          datax.map((x) => {
            return (
              <div key={x._id}>
                {editVisible === false && (
                  <div>
                    <div className="flex">
                      <Link
                        className="hover:text-current w-full "
                        to={{
                          pathname: `${APP_PREFIX_PATH}/collections/${x._id}`,
                        }}
                      >
                        <Card data={x} />
                        <br />
                      </Link>
                      <span
                        className="ti-pencil-alt  relative right-8 top-2 text-lg"
                        onClick={() => {
                          seteditVisible(true);
                        }}
                      ></span>
                    </div>
                  </div>
                )}
                {editVisible === true && (
                  <div>
                    <div className="flex">
                      <div className="w-full">
                       <EditCard data={x} />
                      </div>
                    </div>
                  </div>
                )}
              </div>
            );
          })}

是的，它的工作和變化組件，但它對我所有的卡片都在變化。 我只想更改我單擊的內容。 我怎樣才能做到？ 為了讓它更清晰截圖：

我的卡片： https : //prnt.sc/1artutf

當我單擊右上角的圖標（僅限卡片圖標之一）時： https : //prnt.sc/1arv7f7

Answer 1

您可以做的是傳遞 x._id，而不是在您的 onClick 中使用 seteditVisible(true)。

onClick={() => seteditVisible(x._id)}

在你的渲染中你可以

{datax && datax.map((x) => {
            return (
              <div key={x._id}>
                {editVisible === x._id && (
                  <div>
                    <div className="flex">
                    ...
                    ...
                    ...
                 )}
                 {editVisible !== x._id && (
                  <div>
                  ...
                  ...
                  </div>
                  )}
)}
)};

您可以進一步簡單地使用三元塊。

{editVisible === x._id ? (
     <>
     JSX
     </>
   ) : (
     <>
     JSX
     </>
)}

Answer 2

我想你想創建另一個狀態，比如const [flipStatus, setFlipStatus] = useState([dataX.map((element) => false)}])來保存數組中每個元素的值，並有一個像這樣的 handleClick 函數

const handleClick = (index) => {
        const newflipStatus = [...flipStatus]
        newflipStatus[index] = !flipStatus[index]
        setFlipStatus(newflipStatus);
    }

並在地圖函數FlipStatus[index] === true && ...我認為這可能是開始思考解決方案的一種方式，也看看這個答案