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

Reactjs – react js MUI textfield not editable

Has anyone experienced the textfield being not editable after assigning values to the states?

Here is a video: https://jumpshare.com/embed/26PrqXSjycD4iOB3dL7W

Tags:

2

Answers


  1. 0 
    import React, { useState } from 'react';
import TextField from '@mui/material/TextField';

function MyComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <TextField
      value={value}
      onChange={handleChange}
    />
  );
}

    In React, a control component is an input form element whose state is controlled by React’s state. When you set the value property on an input element such as TextField, that value is bound to React state. Therefore, when the user changes the input, this state must also be updated.

    Login or Signup to reply.
  2. 0

    There are few things that might be causing you the issue – You have a disabled prop set to {busy}. If busy is true, the TextField will be disabled. Make sure busy is set to false or not preventing the field from being editable.

    disabled={busy}

    Make sure that you haven’t set the readonly prop on the TextField. If readonly is set to true, it will make the TextField not editable.

    readonly={false}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search