my-app/src/EditableSelect.js

import * as React from 'react';
import Box from "@mui/material/Box";
import { Grid } from '@mui/material';
import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
//registerPlugin(NestedRows);
import Service from './Service';
import {useLocation} from "react-router";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Typography from '@mui/material/Typography';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Accordion from '@mui/material/Accordion';
import AccordionActions from '@mui/material/AccordionActions';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Stack from '@mui/material/Stack';

import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';




  export default function EditableSelect({ initialText,  onChange }) {
    const [isEditing, setIsEditing] = React.useState(false);
    const [textValue, setTextValue] = React.useState(initialText);
    const handleChange = (event) => {
      setTextValue(event.target.value);
      setIsEditing(false);
      onChange(event.target.value);
    };
    React.useEffect(
      () => {
        setTextValue(initialText);
        setIsEditing(false);
        
      }, [initialText]
    );
    return (

        <Box>
        {isEditing ? (
            <FormControl sx={{ m: 1, minWidth: 100 }} size="small">
            <InputLabel id="demo-select-small-label">工程类别</InputLabel>
            <Select
              labelId="demo-select-small-label"
              id="demo-select-small"
              value={textValue}
              label="工程类别"
              onChange={handleChange}
              onBlur={()=>{
                setIsEditing(false);
              }}
            >
              <MenuItem value="">
                <em></em>
              </MenuItem>
              <MenuItem value={"一类工程"}>一类工程</MenuItem>
              <MenuItem value={"二类工程"}>二类工程</MenuItem>
              <MenuItem value={"三类工程"}>三类工程</MenuItem>
            </Select>
          </FormControl>
          ) : (
            <Button disableRipple variant="text" color="#000000"
               onDoubleClick={()=>{
                setIsEditing(true);
               }}
            >{textValue}</Button>
          )}
        </Box>
    
    );
  }