Javascript 如何在 ReactJS 中启用禁用的 TextField

我希望自动禁用我的文本字段，但当我单击‘编辑’按钮时，它会启用它们进行编辑，再次单击它会再次禁用它们，但会将编辑保存在文本字段中.

我try 在MUI中使用Textfield，然后用一个函数禁用它，并在按钮中调用它:

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;
}

但这给了我一个奇怪的错误，即我的值是空的，尽管它不是空的.我也try 了使用相同的 struct 的ReadOnly，但它是相同的错误.然后我try 了setDisable和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);
}

然后，我try 使用常规标记，而不是使用不同类型的方法:

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;
}

所有这些对我来说都不管用，所以希望有人能给我一些其他的try .任何帮助都将不胜感激！