Styling a card causes TextField to lose focus in Material UI + React

问题

I'm trying to style my card so that it's not so big but the problem is every time I do that, my TextField loses its' functionality and I have to keep on clicking on the TextField because it keeps on losing focus. I need to make my Card component smaller without losing the functionality of my TextField.

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
);

回答1:

The problem is that you are re-creating StyledCard whenever PetitionCard is rendered:

const PetitionCard = () => {

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

    [...]
}

Therefore, a new TextField is created on every render since its container changes. TextField is by default not focused and doesn't know whether the TextField from the previous render was focused.

The solution is to create StyledCard outside PetitionCard:

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

const PetitionCard = () => {

    [...]
}

来源：https://stackoverflow.com/questions/62624424/styling-a-card-causes-textfield-to-lose-focus-in-material-ui-react

标签

javascript

css

reactjs

material-ui