我如何只启用一个按钮 onclick 并使用 react js 禁用所有其他按钮

Question

我有一个从按钮中选择值的应用程序让我向您展示在此处输入图像描述

每当我们想单击一个按钮时，禁用除我选择的所有其他按钮，我不明白如何实现它。

这是代码简化： https://github.com/mehditaib03/Tip-/blob/main/src/Components/Billinput.jsx

对于块代码和概念，请考虑： https://scrimba.com/scrim/c4LEQwf9

 <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> export function OtherMethod () { const [current,setCurrent]= useState(true) function myFunc(e){ //loop overr each node of button //setcurrent node to false //setOther node to true console.log(e.target.disabled) } return ( <div id="container" > <button id="1" disabled={current} onClick={myFunc}> click me</button> <button id="2" disabled={current} onClick={myFunc}>abc</button> <button id="3" disabled={current} onClick={myFunc} >def</button> <button id="4" disabled={current} onClick={myFunc}>ghi</button> </div> ) }

Answer 1

与其将current设为 boolean，不如将其设为string | null string | null 。 然后，将current设置为handleClick function 中按钮元素的 id。 我创建了一个新的Button组件来封装逻辑。 但这里的关键是disabled={current && current !== id} ，它会禁用除最后一次单击的按钮之外的所有按钮。

const Button = ({ children, current, id, onClick }) => {
  return (
    <button id={id} disabled={current && current !== id} onClick={onClick}>
      {children}
    </button>
  );
}

export function OtherMethod () { 
    const [current,setCurrent]= useState<string | null>(null);
  
    const handleClick = e => {
       setCurrent(e.target.id);
    }
    
  return (
      <div id="container" >
          <Button id="1" current={current} onClick={handleClick}> click me</button>
          <Button id="2" current={current} onClick={handleClick}>abc</button>
          <Button id="3" current={current} onClick={handleClick} >def</button>
          <Button id="4" current={current} onClick={handleClick}>ghi</button>
      </div>   
  )
}