React Bootstrap Аккордеон на столе - PullRequest
Новая
       60

React Bootstrap Аккордеон на столе

0 голосов
/ 20 июня 2020

Привет, кто-нибудь знает, как реализовать аккордеон на столе реакции? Я пытаюсь скрыть всю свою таблицу, щелкнув заголовок (тег). спасибо 

<div class="Asalertpf1 block" > 

                    <FormLabel className="btn-success d-flex justify-content-center m-0">
                        <h6 >PF1 AS Alert</h6>
                    </FormLabel>

                    <div >
                    <Table striped hover responsive >
                    <thead className="theadAS text-white thAS" >
                        <tr className="text-center" >
                        <th>Time</th>
                        <th>Job Name</th>
                        <th>Result</th>
                        <th>Alarm Switch</th>
                        </tr>
                    </thead>


                        </Table>
                    </div>
                  <div>

                  <p class="text-center font-weight-bold ">
                      Latest Update Time: 
                          {new Date().toDateString()}&nbsp;
                          {new Date().toLocaleTimeString()}
                        </p>

                  </div>
                    </div>

1 Ответ

0 голосов
/ 20 июня 2020

Обычно вы поддерживаете состояние, скажем, open, и нажимаете onClick на заголовке, и переключаете состояние open

Рабочая демонстрация вcodeandbox

* 1008 пример использует простой div без стилей, но вы поняли идею.

Пример фрагмента: 

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData(),
      open: true
    };
  }
  toggleAccordian = () => {
    this.setState(prev => ({ ...prev, open: !prev.open }));
  };
  render() {
    const { data } = this.state;
    return (
      <div>
        <div
          style={{ background: "red", cursor: "pointer" }}
          onClick={this.toggleAccordian}
        >
          toggle table
        </div>
        <div
          style={{
            margin: "20px",
            display: this.state.open ? "block" : "none"
          }}
        >
          <ReactTable
            data={data}
            columns={[
              {
                Header: "First Name",
                accessor: "firstName",
                className: "sticky",
                headerClassName: "sticky"
              },
    ......

Также, как упоминалось в комментариях, если вы используете какую-либо библиотеку можно использовать готовые гармошки

...