qingdan/front/src/EditableSelectGC.js

import * as React from 'react';
import Box from "@mui/material/Box";
import {RichTreeView } from "@mui/x-tree-view/RichTreeView";
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 Qingdan from './Qingdan';
import Zjcs from './Zjcs';
import Djcs from './Djcs';
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 { DataGrid } from '@mui/x-data-grid';

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

import ListSubheader from '@mui/material/ListSubheader';



  export default function EditableSelectGC({ 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>
              <ListSubheader>建筑工程</ListSubheader>
              <MenuItem value={"建筑工程"}>建筑工程</MenuItem>
              <MenuItem value={"单独预制构件制作"}>单独预制构件制作</MenuItem>
              <MenuItem value={"打预制桩、单独构件吊装"}>打预制桩、单独构件吊装</MenuItem>
              <MenuItem value={"单独预制构件制作"}>单独预制构件制作</MenuItem>
              <MenuItem value={"制作兼打桩"}>制作兼打桩</MenuItem>
              <MenuItem value={"大型土石方工程"}>大型土石方工程</MenuItem>
              <ListSubheader>单独装饰工程</ListSubheader>
              <MenuItem value={"单独装饰工程"}>单独装饰工程</MenuItem>
              <ListSubheader>安装工程</ListSubheader>
              <MenuItem value={"安装工程"}>安装工程</MenuItem>
              <ListSubheader>市政工程</ListSubheader>
              <MenuItem value={"通用项目、道路、排水工程"}>通用项目、道路、排水工程</MenuItem>
              <MenuItem value={"桥梁、水工构筑物"}>桥梁、水工构筑物</MenuItem>
              <MenuItem value={"给水、燃气与集中供热"}>给水、燃气与集中供热</MenuItem>
              <MenuItem value={"路灯及交通设施工程"}>路灯及交通设施工程</MenuItem>
              <MenuItem value={"（市）大型土石方工程"}>（市）大型土石方工程</MenuItem>
              

            </Select>
          </FormControl>
          ) : (
            <Button disableRipple variant="text" color="#000000"
               onDoubleClick={()=>{
                setIsEditing(true);
               }}
            >{textValue}</Button>
          )}
        </Box>
    
    );
  }