如何在单击按钮后禁用按钮并在从后端代码收到响应时将其重新启用

Question

1). There is a form with "Save" button 2). When user clicks save - I want the button to be disabled till backend code sends a response that the form was saved successfully. 3). The button should be enabled back after backend provides response

Why do i need this change:- when user clicks on save multiple times(say n) at once - the backend function for same data gets called for n times and data is saved n times. Hence what to handle this - please suggest

Code:

           <CustomButton
                save={(e) => console.log('Submitting form...')}
                class='ml-2'
                />

CustomButton code:

const CustomButton = (props) => {
let className = "button btn btn-sm";
if (props.class) className += ` ${props.class}`;
else className += " mr-2";
return (
    <>
    {props.save ? 
        <Button 
        className={className}
        id="button_success"
        type="submit"
        onClick={e => props.save(e)}
        disabled={props.disable ? props.disable : false}
        >
            Save
        </Button>
    :

not familiar with react

Answer 1

A good pattern for this is to handle the disabled/enable outside of the button.

const usage = () => {
  const [isLoading, setIsLoading] = useState(false);
  const doRequest = () => {
    setIsLoading(true);
    doTheThing().then(() => {
        // handle request here
    }).finally(() => {
      setIsLoading(false);
    });
  }
  return (<CustomButton
            save={() => doRequest()}
            disable={isLoading}
            class='ml-2'
          />);
}