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

【问题标题】：Seamlessly switch between a text element and a text input in Material UI在 Material UI 中的文本元素和文本输入之间无缝切换
【发布时间】：2020-10-04 13:15:09
【问题描述】：

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

【问题讨论】：

标签： reactjs material-ui textfield typography

【解决方案1】：

考虑使用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>

【讨论】：