在文本字段中输入任何字母时，<TextField/>失去了焦点，当我再输入一个字母时，再次丢失了文本字段的焦点

问：

在文本字段中输入任何字母时丢失了焦点，当我再次输入一个字母然后再次从文本字段中失去焦点时，它会导致在我添加值和 onchange prop 之后，如果我删除这个道具，那么一切都没问题，这导致 AddPosts.jsx 组件的父级是 App.js。

AddPosts.jsx 的代码： 导入 {

化身

箱

按钮

按钮组，

晶圆厂，

模 态

风格

TextField、

工具提示，

字体排印学

} 来自“@mui/材料”;

从 “@material-ui/core/colors” 导入 { blue };

import { Add， DateRange， EmojiEmotions， Image， PersonAdd } from “@material-ui/icons”;

import { VideoCameraBack } from “@mui/icons-material”;

import { Stack } from “@mui/material”;

import { width } from “@mui/system”;

import React， { useState } from “react”;

const AddPosts = （） => {

const [open， setOpen] = useState（false）;

const [postText， setPostText] = useState（“”）;

常量 handlePost = （） => {

console.log(postText);

};

const StyledModal = styled（模态）（{

display: "flex",

alignItems: "center",

justifyContent: "center"

});

const UserBox = styled（Box）（{

display: "flex",

alignItems: "center",

gap: "10px",

marginBottom: "20px"

});

返回 （

<>

  <Tooltip

    title="Add"

    sx={{

      position: "fixed",

      bottom: 20,

      left: 30,

      left: { xs: "calc(50% - 25px)", md: 30 }

    }}

    onClick={(e) => setOpen(true)}

  >

    <Fab color="primary">

      <Add />

    </Fab>

  </Tooltip>

  <StyledModal

    open={open}

    onClose={(e) => setOpen(false)}

    aria-labelledby="modal-modal-title"

    aria-describedby="modal-modal-description"

  >

    <Box

      bgcolor={"background.default"}

      color={"text.primary"}

      width={400}

      height={280}

      p={3}

      borderRadius={5}

    >

      <Typography

        variant="h6"

        style={{ color: "gray", textAlign: "center" }}

      >

        Create Post

      </Typography>

      <UserBox>

        <Avatar

          src="https://images.pexels.com/photos/6963096/pexels-photo-6963096.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"

          sx={{ width: 30, height: 30 }}

        ></Avatar>

        <Typography style={{ fontWeight: 600 }} variant="span">

          Dhruv

        </Typography>

      </UserBox>

      <TextField

        style={{ width: "100%" }}

        id="standard-multiline-static"

        multiline

        rows={3}

        placeholder="What's on your mind"

        value={postText}

        onChange={(e) => setPostText(e.target.value)}

        variant="standard"

      />

      <Stack direction="row" gap={1} mt={2} mb={3}>

        <EmojiEmotions color="primary" />

        <Image color="secondary" />

        <VideoCameraBack color="success" />

        <PersonAdd color="error" />

      </Stack>

      <ButtonGroup

        fullWidth

        color="primary"

        variant="contained"

        aria-label="outlined primary button group"

      >

        <Button>Post</Button>

        <Button style={{ width: "100px" }}>

          <DateRange />

        </Button>

      </ButtonGroup>

    </Box>

  </StyledModal>

</>

);

};

导出默认 AddPosts;

父组件 App.js 的代码：

从 “./Components/Sidebar” 导入侧边栏;

从 “./Components/Feed” 导入 Feed;

从 “./Components/Rightbar” 导入 Rightbar;

import { Box， createTheme， Stack， ThemeProvider } from “@mui/material”;

从 “./Components/Navbar” 导入导航栏;

import { useState } from “react”;

从 “./Components/AddPosts” 导入 AddPosts;

函数 App（） {

const [模式， setMode] = useState（“光”）;

const darkTheme = createTheme（{

调色板：{

mode：模式，

},

});

返回 （

<框 bgcolor={“background.default”} color={“text.primary”}>

);

}

导出默认App;