react 实现页面某个范围的展开、收起功能

在开发过程中有这样的一个需求，根据内容的长度控制内容的收起和展开，实现这样的方式可以通过css进行实现，也可以通过react中的state进行控制，以下通过后者的的方式实现， 效果图如下：

​

​

import React, { PureComponent, Fragment } from 'react';
import { Row, Col, Button, Card, Input, Radio, Select} from 'antd';



const Search = Input.Search;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;

export default class Lt extends PureComponent {

  state= {

    expandForm: false,

  };


  // 表格上方筛选条件 ---- 展开、收起 表格筛选功能项
  toggleForm = () => {
    const { expandForm } = this.state;
    this.setState({
      expandForm: !expandForm,
    });
  };

  // 表格上方筛选条件 ---- 没有预警级别选项
  renderSimpleForm() {

    return (
      <div>

        <Row style={{ height: 62, width: '100%',backgroundColor: '#ECF1F1',marginTop: 13 }}>
          <Col span={24} style={{ display: 'flex' }}>
            <div style={{ margin: '18px 0 0 16px' }}>
              <span>选择范围：</span>
              <Radio.Group style={{ marginLeft: 2 }} className="lzpStyle" onChange={this.change} defaultValue="GL" buttonStyle="solid">
                <Radio.Button value="lt">财政</Radio.Button>
                <Radio.Button value="lzp">财务</Radio.Button>
                <Radio.Button value="mk">业务</Radio.Button>
                <Radio.Button value="ls">产品</Radio.Button>
              </Radio.Group>
            </div>

            <div style={{ margin: '15px 0 0 40px' }}>
              <span>分类范围：</span>
              <Select defaultValue="lucy" style={{ marginLeft:8, width: 120 }} onChange={this.handleChange}>
                <Option value="nn">检查流程</Option>
                <Option value="llw">检查工艺</Option>
              </Select>
            </div>

            <div style={{ marginTop: 20 }}>
              <a style={{ marginLeft: 36 }} onClick={this.toggleForm}>
                展开 <Icon type="down" />
              </a>
            </div>
          </Col>
        </Row>
      </div>
    );
  }

  // 表格上方筛选条件 ---- 展开全部（包括业务类型、预警级别）
  renderAllForm() {

    return (
      <div style={{ height: 100, width: '100%',backgroundColor: '#ECF1F1',marginTop: 13 }}>
        <Row>
          <Col span={24} style={{ display: 'flex' }}>
            <div style={{ margin: '18px 0 0 16px' }}>
              <span>选择范围：</span>
              <Radio.Group style={{ marginLeft: 2 }} className="lzpStyle" onChange={this.change} defaultValue="GL" buttonStyle="solid">
                <Radio.Button value="lt">财政</Radio.Button>
                <Radio.Button value="lzp">财务</Radio.Button>
                <Radio.Button value="mk">业务</Radio.Button>
                <Radio.Button value="ls">产品</Radio.Button>
              </Radio.Group>
            </div>

            <div style={{ margin: '15px 0 0 40px' }}>
              <span>分类范围：</span>
              <Select defaultValue="lucy" style={{ marginLeft:8, width: 120 }} onChange={this.handleChange}>
                <Option value="nn">检查流程</Option>
                <Option value="llw">检查工艺</Option>
              </Select>
            </div>

            <div style={{ marginTop: 20 }}>
              <a style={{ marginLeft: 36 }} onClick={this.toggleForm}>
                收起 <Icon type="up" />
              </a>
            </div>
          </Col>
        </Row>

        <Row style={{ margin: '10px 0 0 16px' }}>
          <Col span={12} style={{lineHeight:'30px'}}>
            <span>级别：</span>
            <RadioGroup  onChange={this.changeLevel} defaultValue={this.state.ruleLevel} value={this.state.ruleLevel} style={{marginLeft:"10px"}}>
              <Radio  value={2} style={{marginRight: 3}}>红色</Radio>
              <Radio  value={1} style={{marginRight: 3}}>黄色</Radio>
              <Radio  value={0} style={{marginRight: 3}}>橙色</Radio>
            </RadioGroup>
          </Col>
        </Row>
      </div>
    );
  }

  // 表格上方筛选条件 ---- 展开、收起 功能按钮
  renderForm() {
    const { expandForm } = this.state;
    return expandForm ? this.renderAllForm() : this.renderSimpleForm();
  }

  render(){


    return(
      <div style={{padding:'0 16px 16px', height:648, backgroundColor:'#fff'}}>

        <Row>

          <Col span={24}>

            <div>{this.renderForm()}</div>

          </Col>
        </Row>
      </div>
    )
  }
}