在材质用户界面中的文本元素和文本输入之间无缝切换

问题描述

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

解决方法

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

material-ui reactjs reactjs textfield typography

在材质用户界面中的文本元素和文本输入之间无缝切换

问题描述

解决方法

相关问答