设置卡片的样式会导致TextField在Material UI + React中失去焦点 [英] Styling a card causes TextField to lose focus in Material UI + React

问题描述

我正在尝试对卡片进行样式设计，以使其不会太大，但问题是每次我这样做时，我的TextField都会失去其功能，并且我必须继续单击TextField，因为它会一直失去焦点.我需要使Card组件变小，而又不失去TextField的功能.

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

解决方案

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 = () => {

    [...]
}

这篇关于设置卡片的样式会导致TextField在Material UI + React中失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！