运行在 React Typescript 中单击按钮时每个项目的函数

Question

我必须创建第一个按钮。次数取决于我的数组所以我做了以下

    const Sandbox = () => {
  const [isClicked, setClicked] = useState(false);

  const clickMe = (): void => {
    
    console.log("say hello new");
    setClicked(!isClicked);

    
  };

  let buttonContents = [
    { id: 1, Title: "One", Description: "First" }, //isClicked
    { id: 2, Title: "Two", Description: "Second" },
    { id: 3, Title: "Three", Description: "Third" },
    { id: 4, Title: "Four", Description: "Fourth" },
  ];
  let buttonContentsList: any[] = [];

 
  buttonContents.forEach((item) => {
    buttonContentsList.push(
      <BigButton
        onClick={() => {
          clickMe(); 
        }}
        Title={item.Title}
        Description={item.Description}
        clicked={isClicked}
      ></BigButton>
    );
  });

  return <>{buttonContentsList}</>;
};

export default Sandbox;

当我这样做并点击一个按钮时，我所有的按钮都会被选中。但是我只想选择一个按钮，当单击另一个按钮时，状态应该更改当前按钮被单击以取消选中，另一个单击以被选中，因此在按钮组中只单击一个按钮.这里给出的代码来自 parent 组件，我确实将 props 和状态传递给 child 没有问题。我应该在此处进行哪些更改才能实现我的需要？

Answer 1

有多种方法可以实现您想要的效果。但最接近您的解决方案是：

import {useState} from 'react'

const Sandbox = () => {
  const [clickedId, setClickedId] = useState(null);

  const clickMe = (id) => setClickedId(id);

  let buttonContents = [
    { id: 1, Title: "One", Description: "First" },
    { id: 2, Title: "Two", Description: "Second" },
    { id: 3, Title: "Three", Description: "Third" },
    { id: 4, Title: "Four", Description: "Fourth" },
  ];
  let buttonContentsList = [];
 
  buttonContents.forEach((item) => {
    buttonContentsList.push(
     <BigButton
       onClick={() => {
          clickMe(item.id); 
       }}
       Title={item.Title}
       Description={item.Description}
       clicked={clickedId === item.id}
     ></BigButton>
    );
  });

  return <>{buttonContentsList}</>;
};

export default Sandbox;

抱歉，我对按钮组件做了一些修改。但我希望你能明白。

运行在 React Typescript 中单击按钮时每个项目的函数

Run function foreach item when button isClicked in React Typescript

arrays

foreach

arraylist

typescript

reactjs

运行 在 React Typescript 中单击按钮时每个项目的函数

Run function foreach item when button isClicked in React Typescript

arrays

foreach

arraylist

typescript

reactjs

运行在 React Typescript 中单击按钮时每个项目的函数