时间戳

首页 > 解决方案 > 在 Material UI 中的文本元素和文本输入之间无缝切换

reactjs - 在 Material UI 中的文本元素和文本输入之间无缝切换

问题描述

我有一张带有图像和几个孩子的Material UI Card 。<Typography>我需要允许用户编辑图像 URL 和子项中的文本。在编辑过程中不改变卡片的整体大小或其任何子项的大小的最佳方法是什么？有我可以使用的现有示例吗？

标签： reactjsmaterial-uitextfieldtypography

解决方案

考虑使用contentEditable

<Typography contentEditable={true} suppressContentEditableWarning={true}>


const useStyles = makeStyles({
  root: {
    maxWidth: 300,
    margin: "auto",
    marginBottom: "10px"
  },
  media: {
    height: 60
  },
});

function App() {
  return (
    <SampleCard
      title="Click me to edit"
      description="description"
      image="https://via.placeholder.com/300x60"
    />
  )
}

function SampleCard({title, description, image}){

  const classes = useStyles();

  return(
    <Card classes={{root: classes.root}}>
      <CardMedia
        classes={{media: classes.media}}
        component="img"
        image={image}
        title={title}
      />
      <CardContent>
        <Typography contentEditable={true} suppressContentEditableWarning={true} gutterBottom variant="h5" component="h2">
          {title}
        </Typography>
        <Typography variant="body2" color="textSecondary" component="p">
          {description}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}


ReactDOM.render(<App/>, document.getElementById("root"));
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { Button, Card, CardMedia, CardContent, Typography, CardActions, makeStyles } = MaterialUI;
  </script>
</body>

推荐阅读