Question 49244 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to enable a disabled TextField in ReactJS? – Javascript

I would like to have my textfields automatically disabled, but when I click the ‘Edit’ button, it enables them for editing, and clicking it again would disable them again but saves the edits in the textfield.

I have tried using TextField from MUI and then disabling that with a function and calling that in the button:

const User = () => {
     <TextField id="tf" size="small" className={classes.text} value="JohnDo3" variant="filled" disabled/>
     <Button id="button" onClick={edit()} variant="edit" className={classes.button}>Edit</Button>
}

function edit(){
     document.getElementById("tf").disabled=false;
}

But that gave me a weird error about my value being null even though it wasn’t. I also tried readOnly with the same structure but it was the same error. I then tried both setDisabled and setReadOnly:

const User = () => {
     <TextField id="tf" size="small" className={classes.text} value="JohnDo3" variant="filled" readOnly/>
     <Button id="button" onClick={edit()} variant="edit" className={classes.button}>Edit</Button>
}

function edit(){
     var tf = document.getElementById("tf");
     tf.setReadOnly(true);
}

I then tried using regular tags instead of TextField with a different type of method:

const User = () => {
     <input type="text" className={classes.text} name="username" id="tf" value="johndo3" disabled/>
     <input type="button" name="edit" id="button" className={classes.button} value="Edit" onclick="edit()"/>
}

function edit(){
        document.getElementById("tf").disabled = !document.getElementById("tf").disabled;
}

None of these have worked for me so hopefully someone might be able to give me something else to try. Any help would be much appreciated!

Tags:

2

Answers


  1. 0

    Directly interacting with the DOM in React is almost always the wrong approach. You’re missing a critical concept in React… state.

    Use a state value to determine if the element is disabled. For example, if you declare a state value such as:

    const [isDisabled, setIsDisabled] = useState(true);

    Then you can use that to populate the disabled attribute:

    <TextField id="tf" size="small" className={classes.text} value="JohnDo3" variant="filled" disabled={isDisabled}/>

    Then when you want to enable the field, just update state:

    onclick={() => setIsDisabled(false)}
    Login or Signup to reply.
  2. 0

    You must import "useState" from React and use it to manage the behavior of your component, here is an example:

    const User = () => {
  const [disabled, setDisabled] = useState(true);

  const edit = () => setDisabled(false);

  return (
    <>
      <TextField
        id="tf"
        size="small"
        className={classes.text}
        value="JohnDo3"
        variant="filled"
        disabled={disabled}
      />
     <Button
       id="button"
       onClick={edit}
       variant="outlined"
       className={classes.button}
      >
       Edit
     </Button>
 </>
 ); 
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search