设置卡片样式会导致 TextField 在 Material UI + React 中失去焦点答案

【问题标题】：Styling a card causes TextField to lose focus in Material UI + React设置卡片样式会导致 TextField 在 Material UI + React 中失去焦点
【发布时间】：2020-06-28 15:13:28
【问题描述】：

我正在尝试设置我的卡片的样式，使其不那么大，但问题是每次我这样做时，我的 TextField 都会失去它的功能，我必须继续点击 TextField，因为它一直失去焦点。我需要在不丢失 TextField 功能的情况下缩小 Card 组件。

https://codesandbox.io/s/mutable-monad-dsvf8?file=/src/index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import TextField from "@material-ui/core/TextField";
import CreateIcon from "@material-ui/icons/Create";
import Box from "@material-ui/core/Box";
import CardMedia from "@material-ui/core/CardMedia";
import MuiAlert from "@material-ui/lab/Alert";
import Snackbar from "@material-ui/core/Snackbar";
import { withStyles } from "@material-ui/core/styles";

const PetitionCard = () => {
  const StyledCard = withStyles({
    root: { height: 450, width: 350 }
  })(Card);

  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [open, setOpen] = useState(false);
  const [petition, newPetition] = useState(false);

  const handleTitleChange = event => {
    setTitle(event.target.value);
  };

  const handleDescriptionChange = event => setDescription(event.target.value);

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
  };

  const Alert = props => <MuiAlert elevation={6} variant="filled" {...props} />;

  const Message = (message, severity) => {
    return (
      <Snackbar open={!open} autoHideDuration={3000} onClose={handleClose}>
        <Alert severity={severity}>{message}</Alert>
      </Snackbar>
    );
  };

  const clearField = event => {
    setOpen(true);
    if (title.length > 0 && description.length > 0) {
      setTitle("");
      setDescription("");
      return (
        <Message
          open={open}
          message={"You have successfully created a petition!"}
          severity={"success"}
        />
      );
    } else {
      return (
        <Message
          message={"You have one more more fields missing"}
          severity={"error"}
        />
      );
    }
  };
  return (
    <StyledCard>
      <Box mt={1}>
        <Grid container justify="center">
          <TextField
            id="outlined-multiline-static"
            multiline
            rows={1}
            variant="outlined"
            placeholder="Title"
            value={title}
            onChange={handleTitleChange}
          />
        </Grid>
      </Box>

      <CardMedia title="Petition" style={{ height: 0, paddingTop: "40.25%" }} />

      <Box mt={1} justify="center">
        <Grid container justify="center">
          <TextField
            size="small"
            inputProps={{
              style: { fontSize: 15 }
            }}
            id="outlined-multiline-static"
            multiline
            rows={5}
            placeholder="Description"
            variant="outlined"
            value={description}
            onChange={handleDescriptionChange}
          />
        </Grid>
      </Box>

      <Box mt={1}>
        <Grid container justify="center">
          <Button onClick={clearField}>
            <CreateIcon />
            Create Petition!
          </Button>
        </Grid>
      </Box>
    </StyledCard>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <PetitionCard />
  </React.StrictMode>,
  rootElement
);

【问题讨论】：

我不明白。您的 Card 没有自定义样式，我不知道这会如何使 TextField 失去焦点。您是否可能混淆了术语？请提供样式化 Card 组件的代码并尝试重新表述您的问题。最好有一个codeandbox。
codesandbox.io/s/mutable-monad-dsvf8?file=/src/index.js 这是我试图做的，正如你所看到的，每次我输入一个字符时，我都会在 TextField 中再次单击以继续输入

标签： javascript css reactjs material-ui

【解决方案1】：

问题在于，每当呈现PetitionCard 时，您都在重新创建StyledCard：

const PetitionCard = () => {

    const StyledCard = withStyles({
        root: { height: 450, width: 350 }
    })(Card);

    [...]
}

因此，自从容器更改后，每次渲染都会创建一个新的TextField。 TextField 默认没有焦点，也不知道之前渲染的TextField 是否焦点。

解决办法是在PetitionCard之外创建StyledCard：

const StyledCard = withStyles({
    root: { height: 450, width: 350 }
})(Card);

const PetitionCard = () => {

    [...]
}

【讨论】：