从所有按钮中删除 class active 并将其添加到在 react 中单击的最后一个按钮

Question

这是我在 React 中的第一个项目，我想为我单击的按钮添加一个 className active 并从其他按钮中删除它（如果存在）但我不知道该怎么做

export default function MediaLink({ links }) {

    const [srcURL, setsrcURL] = useState(links[0].url);
  
    const ChangeSrc = (url, name) => {

        setsrcURL(url);

    }

    return (
      <>
      <div className='mb-4'>
      {links.map((link, index) => (
          <button 
          onClick={() => ChangeSrc(link.url, link.name)} className={'text-white font-bold bg-red-500 py-4 px-6 mr-4 mt-4 rounded-md hover:bg-white border-2 border-red-500 hover:text-gray-900 duration-200 transition-colors' + `${index == 0 ? ' bg-white text-red-600' : ''}`} id={link.name} key={link.name}>{link.name}</button>
      ))}

      </div>
      <iframe style={{width:"100%", height: "595px"}} src={srcURL} frameBorder="0"
        scrolling="no"
        allowFullScreen={true} />
      </>
    )
  }

Answer 1

只需使用srcURL == link.url检查：

className = {"..." + `${srcURL == link.url ? ' active ' : ''}`}

从所有按钮中删除 class active 并将其添加到在 react 中单击的最后一个按钮

remove class active from all the buttons and ad it to the last button clicked in react

reactjs

use-state