时间戳

首页 > 解决方案 > 如何在按钮单击时更新排版文本

reactjs - 如何在按钮单击时更新排版文本

问题描述

我正在使用 Material UI Typography，其文本（ABC）需要在按钮单击时更新为（XYZ）。下面是排版的代码

function handleDrawerOpen() {
setOpen(true);
//update ABC to XYZ
}

function handleDrawerClose() {
setOpen(false);
}

return (
<div className={classes.root}>
  <CssBaseline />
  <AppBar
    position="fixed"
    className={clsx(classes.appBar, {
      [classes.appBarShift]: open,
    })}
  >
    <Toolbar>
      <IconButton
        color="inherit"
        aria-label="open drawer"
        onClick={handleDrawerOpen}
        edge="start"
        className={clsx(classes.menuButton, {
          [classes.hide]: open,
        })}
      >
        <Typography className={classes.GStyle} variant="h6" noWrap>
          {classes.drawerOpen ? 'ABC' : 'XYZ'}
        </Typography>
      </IconButton>
    </Toolbar>
  </AppBar>
  <Drawer
    variant="permanent"
    className={clsx(classes.drawer, {
      [classes.drawerOpen]: open,
      [classes.drawerClose]: !open,
    })}
    classes={{
      paper: clsx({
        [classes.drawerOpen]: open,
        [classes.drawerClose]: !open,
      }),
    }}
    open={open}
  >
    <div className={classes.toolbar}>
      <IconButton className={classes.icon} onClick={handleDrawerClose}>
        {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
      </IconButton>
    </div>

标签： reactjsmaterial-ui

解决方案

解决方法：使用状态。

例子：

class Application extends React.Component {
  state = {
    text: 'ABC',
  };
  handleClick = () => {
    this.setState({text: 'XYZ'});
  }
  
  render(){
    const { text } = this.state;
    return(
      <div>
        <button type='button' onClick={this.handleClick}>Click here</button>
        <div>{text}</div>
      </div>
    );
  }
}
React.render(<Application />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="app"></div>

推荐阅读