文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在单击按钮上更新排版文本

问如何在单击按钮上更新排版文本
EN

Stack Overflow用户

提问于 2019-09-30 14:15:03

回答 2查看 885关注 0票数 0

我使用的材料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>

reactjs

material-ui

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-09-30 14:17:52

您可以通过一个简单的条件和一个存储在您的状态中的标志(它看起来已经包含在您的抽屉的open标志中)来完成这个任务：

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

您可能希望在React中阅读关于条件渲染的内容。在一个典型的React应用程序中，您会发现自己经常需要完成类似的事情，并且有许多不同的实现方法是有用的。

票数 1

Stack Overflow用户

发布于 2019-09-30 14:19:33

解决方案：使用状态。

示例：

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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58169750

复制

相似问题

问如何在单击按钮上更新排版文本
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击按钮上更新排版文本EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击按钮上更新排版文本
EN