Как обновить типографский текст по нажатию кнопки

Question

Я использую 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>

Answer 1

Решение : использовать состояние.

пример:

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>

Answer 2

Вы можете сделать это с помощью простого условия и флага, хранящегося в вашем штате (который выглядит так, как будто у вас уже есть флаг open для ящика):

 <Typography className = {classes.GStyle} variant="h6" noWrap>
        {open ? 'XYZ' : 'ABC' }
  </Typography>

Возможно, вы захотитепрочитайте условный рендеринг в React. Вы обнаружите, что вам часто приходится выполнять похожие вещи в типичном приложении React, и есть много разных методов реализации, которые будет полезно знать.