如何在材料ui中使这样的事情发生反应？

Question

我如何在材料UI中对此做出反应？

我遇到的主要问题是我不知道如何使用刷新图标制作正确的部分。

Answer 1

这个问题是一个业余问题。但是我不能给您什么见识，您如何可以从很少的基础知识入手，以后又可以使其成为有状态的组件。

const styles = theme => ({
margin: {
    margin: theme.spacing.unit,
  },
  roundBorder : {
    borderRadius: '25px',
    borderColor: '#80bdff',
    border: '1px solid #ced4da',
  }
});

function App(props) {
const { classes } = props;

return (
<div>

  <div className={classes.margin}>
    <Grid container spacing={8} alignItems="flex-end">

      <Grid item>
        <TextField className={classes.roundBorder} id="input-with-icon-grid" label="With a grid" />
      </Grid>
      <Grid item>
        <AccountCircle />
      </Grid>
    </Grid>
  </div>
</div>
 );
 }

这将创建如下内容：

Answer 2

检查带有图标搜索的示例，只需将图标右对齐：

https://codesandbox.io/s/material-demo-jhy9f