Javascript 第一次单击手风琴后，如何禁用手风琴传播？

我有一个

手风琴

，在

手风琴摘要

（材料界面）中有一个

文本字段

，单击该字段可打开带有表单其余部分的

手风琴详情

，我不知道如何在第一次点击后阻止多次点击该字段触发传播以打开和关闭手风琴内容。我不希望新可见的表单内容在第一次单击

AccountSummary

后消失。我知道第一次输入字段时如何禁用传播，但不知道如何只允许传播一次

import React from "react";
import { Formik, Field, Form } from "formik";
import { TextField, Select } from "formik-material-ui";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import FormControl from "@material-ui/core/FormControl";
import MenuItem from "@material-ui/core/MenuItem";
import Button from "@material-ui/core/Button";
import Accordion from "@material-ui/core/Accordion";
import MuiAccordionDetails from "@material-ui/core/AccordionDetails";
import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
import { withStyles } from "@material-ui/core/styles";

const AccordionSummary = withStyles({
  root: {
    "&.Mui-focused": {
      backgroundColor: "inherit"
    }
  }
})(MuiAccordionSummary);

const AccordionDetails = withStyles({
  root: {
    paddingTop: 0
  }
})(MuiAccordionDetails);

export default function App() {
  return (
    <div className="App">
      <Formik>
        <Form>
          <Accordion>
            <AccordionSummary>
              <FormControl fullWidth>
                <Field
                  component={TextField}
                  name="itemName"
                  placeholder="What do you want to buy?"
                  variant="outlined"
                />
              </FormControl>
            </AccordionSummary>
            <AccordionDetails>
              <Grid container>
                <Grid item xs={2}>
                  <Box>
                    <FormControl fullWidth>
                      <Field
                        component={TextField}
                        name="quantity"
                        label="Qty"
                        type="number"
                        variant="outlined"
                        size="small"
                      />
                    </FormControl>
                  </Box>
                </Grid>
                <Grid item xs={2}>
                  <Box pl={1}>
                    <FormControl fullWidth>
                      <Field
                        component={TextField}
                        name="volume"
                        label="Vol"
                        type="number"
                        variant="outlined"
                        size="small"
                      />
                    </FormControl>
                  </Box>
                </Grid>
                <Grid item xs={2}>
                  <Box pl={1}>
                    <FormControl label="Type" size="small" fullWidth>
                      <Field
                        component={Select}
                        name="volumeType"
                        as="select"
                        variant="outlined"
                      >
                        <MenuItem value="g">grams</MenuItem>
                        <MenuItem value="kg">kg</MenuItem>
                        <MenuItem value="ml">ml</MenuItem>
                        <MenuItem value="cl">cl</MenuItem>
                        <MenuItem value="litre">litre</MenuItem>
                        <MenuItem value="pint">pint</MenuItem>
                        <MenuItem value="pack">pack</MenuItem>
                      </Field>
                    </FormControl>
                  </Box>
                </Grid>
                <Grid item xs={4}>
                  <Box pl={1}>
                    <FormControl fullWidth>
                      <Field
                        component={TextField}
                        name="brandName"
                        label="Brand"
                        variant="outlined"
                        size="small"
                      />
                    </FormControl>
                  </Box>
                </Grid>
                <Grid item xs={2}>
                  <Box pl={1}>
                    <Button
                      type="submit"
                      variant="contained"
                      color="primary"
                      disableElevation
                      fullWidth
                    >
                      Add
                    </Button>
                  </Box>
                </Grid>
              </Grid>
            </AccordionDetails>
          </Accordion>
        </Form>
      </Formik>
    </div>
  );
}

从“React”导入React；
从“Formik”导入{Formik，Field，Form}；
导入{TextField，从“formik材质界面”中选择}；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Box”导入框；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/MenuItem”导入菜单项；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Accordion”导入手风琴；
从“@material ui/core/AccordionDetails”导入muiacordindetails；
从“@material ui/core/accordinsummary”导入muiacordinsummary；
从“@material ui/core/styles”导入{withStyles}”；
const Accordinary Summary=带有样式({
根目录：{
"梅艳芳":{
背景色：“继承”
}
}
})（Muiacordinsummary）；
const AccordionDetails=带有样式({
根目录：{
paddingTop:0
}
})（muiacordindetails）；
导出默认函数App（）{
返回(
在不造成巨大性能损失的情况下，我实现此功能的唯一方法是：

import Accordion from "@material-ui/core/Accordion";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import React, { useState } from "react";

export default function ControlledAccordions() {
  const [expanded, setExpanded] = useState("");
  const handleChange = (panel) => () => {
    setExpanded(panel);
  };

  return (
    <div>
      <Accordion
        expanded={expanded === "panel1"}
        onChange={handleChange("panel1")}
      >
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography>General settings</Typography>
          <Typography>I am an accordion</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat.
            Aliquam eget maximus est, id dignissim quam.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}


从“@material ui/core/Accordion”导入手风琴；
从“@material ui/core/AccordionDetails”导入AccordionDetails；
从“@material ui/core/AccordionSummary”导入AccordionSummary；
从“@material ui/core/Typography”导入排版；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
从“React”导入React，{useState}；
导出默认函数ControlleAccordions（）{
const[expanded，setExpanded]=useState（“”）；
常量句柄更改=（面板）=>（）=>{
小组委员会；
};
返回(
我会帮你整理一下。谢谢你帮我看一下。我已经把你的代码添加到一个沙箱中，但它说找不到变量“string”。我似乎无法修复代码部分，因为我不太懂那里的语法。@Anthony the
：string
之后
面板
和
之后的
使用tate
是语法。我已经更新了@AlexMckay的答案，添加了一个沙盒并删除了打字脚本。啊，我明白了！太棒了。谢谢你们！