Question

我正在使用“材料UI印刷术”，单击按钮时其文本（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中阅读conditional rendering。您会发现自己需要在一个典型的React应用程序中经常完成相似的事情，并且有很多不同的实现方法对您有所帮助。

如何在按钮单击时更新印刷文字

2 个答案: