Question

我打开“折叠”中的第一个“面板”。我单击按钮->第一个“面板”关闭。我打开第二个“面板”。我点击按钮->关闭第二个“面板”。

我正在使用ant设计库中的“面板”组件。

我尝试通过以下方式进行操作：单击按钮，标志更改并添加close {display: none}类。我的类覆盖有问题。

此处的代码：https://stackblitz.com/edit/react-1xxrkc

    import React, { Component } from 'react';
    import { render } from 'react-dom';
    import Hello from './Hello';
    import './style.css';
    import { Collapse } from 'antd';

    const { Panel } = Collapse;
    class App extends Component {
      constructor() {
        super();
        this.state = {
          close: false
        };
      }

      callback = (key) => {
        console.log(key);
      }

      onClose = () => {
        close: true;
      }


      render() {


    const text = (
      <p style={{ paddingLeft: 24 }}>
        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found
        as a welcome guest in many households across the world.
      </p>
    );
        return (
          <div>
            <Collapse defaultActiveKey={['1']} onChange={this.callback}>
              <Panel className={this.state.close ? "close" : null } 
 header="This is panel header with arrow icon" key="1">
                <p>{text}</p>
              </Panel>
              <Panel className={this.state.close ? "close" : null } 
 showArrow={false} header="This is panel header with no arrow icon" key="2">
                <p>{text}</p>
              </Panel>
            </Collapse>

          <button className="button" onClick={this.onClose}>Close</button>
          </div>
        );
      }
    }

Answer 1

antd-Collapse库在ant-collapse-content-active

时追加ant-collapse-content-inactive和Collapse类

您只需要在.ant-collapse-content-inactive{ display: none;}文件中添加此 css style.css。

.ant-collapse-content-inactive{
  display: none;
}
.ant-collapse-content-active{
  display: block;
}

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Collapse } from 'antd';

const { Panel } = Collapse;

class App extends Component {
  constructor() {
    super();   
  }

  callback = (key) => {
    
  }

  onClose = () => {
    var x = document.querySelectorAll(".ant-collapse-item-active");    
    if(x.length){
      for(var i=0; i<x.length; i++) { 
        setTimeout(function () {
        var el = document.querySelector(".ant-collapse-item-active");        
        el.children[0].click();  
    }, 100);          
    }
  }
    
}    
  


  render() {
const text = (
  <p style={{ paddingLeft: 24 }}>
    A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found
    as a welcome guest in many households across the world.
  </p>
);
    return (
      <div>
        <Collapse defaultActiveKey={['1']} onChange={this.callback}>
          <Panel  header="This is panel header with arrow icon" key="1">
            <p>{text}</p>
          </Panel>
          <Panel   showArrow={false} header="This is panel header with no arrow icon" key="2">
            <p>{text}</p>
          </Panel>
        </Collapse>

      <button className="button" onClick={this.onClose}>Close</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

如何在React中使用单独的按钮关闭“折叠”中打开的“面板”？

1 个答案: