javascript - react控制文本内容的显示隐藏？

问题描述

问 题

第一次写react+redux项目时遇到了问题，怎么在点击按钮时控制元素的显示隐藏？

如图：
红框框整体是个框架，会有很多个这样的框架，当点击具体的某一个按钮，即数字1标示的按钮时，我需要将
1：.tipic-content的stylemax-height改为auto
2：.flod即数字2标示的style改为display: none
其实效果就是点击按钮，让显示更多的文字显示出来，.fold是一个底部的渐变到白色的效果而已。
然后再次点击时做相反的动作就行了。
这个其实用jquery做很方便，点击找到父类对应的class，修改样式就行了，但是现在用react做，不想用jquery，就不知道怎么做，用原生的js控制元素太啰嗦了，大家有什么好方法呢。

解决方案

不建议使用style进行样式的控制，可以定义.topic-intro-extended来修改max-height为auto, .fold也是同理

var Component = React.createClass({
  getInitialState:function(){
    return {
      topicExtended:false
    }
  },
  toggleClickHandler:function(){
    this.setState({
      topicExtended:!this.state.topicExtended
    });
  },
  render:function(){
    var topicCls = "topic-intro";
    var foldCls = "";
    if(this.state.topicExtended){
      topicCls+=" topic-intro-extended";
      foldCls+="fold";
    }
    return (
      <div>
        <div className="topic-content">
          <div className={topicCls}>blablabla</div>
          <div className={foldCls}>blablabla</div>
        </div>
        <div className="toggle-btn" onClick={this.toggleClickHandler}>click me</div>
      </div>
    )
  }
});

另外，对className的控制，建议使用classnames包

这篇关于javascript - react控制文本内容的显示隐藏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！