منع الضغط على الزر عدة مرات في مكون REACT

لديك عدة طرق أرفق لك منها إثنتين 

1- بإستخدام ال state 

export default function Send() {
  const[buttonDisabled, setButtonDisabled] = useState(false);  // الخطوة 1
  const handleSubmit = () => {
    setButtonDisabled(true) // الخطوة 2
      axios.post(...).then(res => {...}).catch(err => ...)
  }
  
      return (
          <div>
         // .... الخطوة 3
             <button disabled={buttonDisabled}  onClick={handleSubmit}>send</button> 
          </div>
      )
  }

2- بإستخدام ال refs 

export default function Send() {
const buttonRef = useRef();  // الخطوة رقم 1
const handleSubmit = () => {
  // الخطوة رقم 2
   if(buttonRef.current){
    buttonRef.current.setAttribute("disabled", "disabled");
  }
    axios.post(...).then(res => {...}).catch(err => ...)
}

    return (
        <div>
        ....// الخطوة رقم 3
           <button ref={buttonRef} onClick={handleSubmit}>send</button>
        </div>
    )
}

استخدم الكود السابق ويفضل عدم استخدام ref لأنه يقراء DOM مباشرةً

إذا أردت إيقاف الزر بعد الضغط لأول مرة فقط فيمكنك استخدام كود عبدالله الكود رقم واحد

اما إذا أردت إعادة تشغيل الزر إذا لم يتم إرسال البيانات بنجاح لكي يحاول مرة أخرى فاستخدم هذا الكود

export default function Send() {
  const[buttonDisabled, setButtonDisabled] = useState(false);  // الخطوة 1
  const handleSubmit = () => {
    setButtonDisabled(true) // الخطوة 2
      axios.post(...).then(res => {...}).catch(err => {setButtonDisabled(false)})
  }
  
      return (
          <div>
         // .... الخطوة 4
             <button disabled={buttonDisabled}  onClick={handleSubmit}>send</button> 
          </div>
      )
  }