Question 210238 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Button Disable

Can I disable Button in react when login user is member.I waant to disable without using disabled attribute.When I used disabled attribute,it can delete from developer tools and button is active again.Please help me

I want button is disable when login user is member and even delete disabled attribute from developer tool, It still inactive

Tags:

3

Answers


  1. 0

    You can use the disabled prop to disable the button, but this will not prevent the user from removing the disabled attribute in the dev tools and enabling the button again. To avoid this, you should also use the disabled value to conditionally handle the click event listener from the button. For example:

    For example:

    import { useState } from "react";

export default function App() {
  const [disabled, setDisabled] = useState(false);
  const handleClick = (e) => {
    if (!disabled) {
      console.log(e.target);
    }
  };
  return (
    <div className="App">
      <button onClick={() => setDisabled((disabled) => !disabled)}>
        disable button
      </button>
      <button disabled={disabled} onClick={handleClick}>
        click
      </button>
    </div>
  );
}

    This way, even if the user removes the disabled attribute, the button will not have any click handler attached to it.

    Login or Signup to reply.
  2. 0

    If you want to disable a button in React based on whether the login user is a member and prevent users from enabling it via developer tools, you need to handle the button’s disabled state in a more secure way. One way to achieve this is by managing the button’s disabled state within your component’s state or using Redux.

    Here’s an example of how you can implement this:

    • Assuming you have some state that indicates whether the login user is
      a member or not. For demonstration purposes, I’ll use a boolean
      variable called isMember to represent this state.

    • Initialize the button’s disabled state based on the isMember value.

    • Use React’s lifecycle methods or React hooks (e.g., useEffect) to
      monitor changes to the isMember value and update the button’s
      disabled state accordingly.

    • When the button is clicked, perform the desired action only if it’s
      not disabled.

    Login or Signup to reply.
  3. 0

    Disabled button Forever

    you can disabled the element and remove the click event listener for the button and like this when they enabling it via developer tools the button dont work as when it is enabled with the orginal function and add an observer to make the button Disabled and this time for Forever

    import React, { useState, useRef, useEffect } from "react";
import "./App.css";

function App() {
  const elementRef = useRef();

  const [isDisabled, setDisabled] = useState(false);
  const handleClick = (e) => {

    if (!isDisabled) {
      console.log('i am the orginal click handler');
    }

  };

  useEffect(() => {
    elementRef.current.addEventListener("click", handleClick);

  }, [])

  const handleDisabled = () => {
    setDisabled(true);
    elementRef.current.disabled = true;
    delete elementRef.current.removeEventListener('click', handleClick);
    elementRef.current.onclick = () => console.log('i am the fake click handler');
    
    var config = {
      attributes: true,
      childList: true,
      characterData: true
    };

    // Observer to block the element to be enabled from dev tools.
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(record => {
        // In each iteration an individual mutation can be accessed.

        // In this case if the type of mutation is of attribute run the following block.
        // A mutation could have several types.
        if (record.type === 'attributes') {
          const changedAttrName = record.attributeName;

          if (changedAttrName === "disabled") {
            observer.disconnect(); // turn observer off;

            record.target.setAttribute("disabled", true);
            observer.observe(elementRef.current, config); // turn back on 

          }
        }
      });
    });

    observer.observe(elementRef.current, config);
    
    
  }

  return (
    <div>
      <button onClick={handleDisabled}>
        disable button
      </button>
      <button ref={elementRef}>
        click
      </button>
    </div>
  );
}

export default App;

    you can try the code at https://codedamn.com/online-compiler/reactjs by copy paste

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search