隐藏 Reactjs 表的列

Question

在我的应用程序中，我有使用 React JS 呈现的表格。要求是在单击每列中的按钮时隐藏输入列（th 和 td）。我不确定如何实现它。

https://stackblitz.com/edit/react-cjzst8

import React, { Component } from 'react';
import { render } from 'react-dom';

var tableData = [
  {
    "_id": "5de8d7",
    "name": "Oneill Chang",
    "company": "TINGLES",
    "email": "oneillchang@tingles.com",
    "phone": "+1 (826) 583-3110"
  },
  {
    "_id": "5de8d5",
    "name": "Rogers Davis",
    "company": "ENTALITY",
    "email": "rogersdavis@entality.com",
    "phone": "+1 (918) 571-2672"
  },
  {
    "_id": "8d05243",
    "name": "Barlow Alford",
    "company": "BRISTO",
    "email": "barlowalford@bristo.com",
    "phone": "+1 (855) 527-2874"
  },
  {
    "_id": "6f5b6",
    "name": "Hopper Cote",
    "company": "BEZAL",
    "email": "hoppercote@bezal.com",
    "phone": "+1 (968) 565-2872"
  }
]

class App extends Component {
  constructor() {
    super();
    this.state = {
      data:[]
    };
  }

  componentDidMount(){
     this.setState({
       data:tableData
     })
  }

  render() {
    return (
       <table className="table" >
          <thead>
             <tr>
               <td> Id <br/> <button> Hide </button>  </td>
               <td> Name <br/> <button> Hide </button> </td>
               <td> Company <br/> <button> Hide </button> </td>
               <td> Email <br/> <button> Hide </button> </td>
               <td> Phone <br/> <button> Hide </button> </td>
             </tr>
          </thead>
          <tbody>
             {this.state.data.map((item,index)=>{
                return(
                  <tr>
                    <td> {item._id} </td>
                    <td> {item.name} </td>
                    <td> {item.company} </td>
                    <td> {item.email} </td>
                    <td> {item.phone} </td>
                  </tr>
                )
             })}
          </tbody>
       </table>
    );
  }
}

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

Answer 1

在给定的代码中，我隐藏了名称列。你可以这样做剩余。

class App extends Component {
 constructor() {
 super();
 this.state = {
  data:[],
  hiddenCol: {}
 };
}

componentDidMount(){
 this.setState({
   data:tableData
 })
} 

hideCol = (value) => {
let hiddenCol = this.state.hideCol;
hiddenCol={...hiddenCol,value};

  this.setState{
   hiddenCol
  }
}

render() {
return (
   <table className="table" >
      <thead>
         <tr>
           <td> Id <br/> <button> Hide </button>  </td>
           {!this.state.hiddenCol.name && <td> Name <br/> <button onClick={()=>this.hideCol('name')}> Hide </button> </td>}
           <td> Company <br/> <button> Hide </button> </td>
           <td> Email <br/> <button> Hide </button> </td>
           <td> Phone <br/> <button> Hide </button> </td>
         </tr>
      </thead>
      <tbody>
         {this.state.data.map((item,index)=>{
            return(
              <tr>
                <td> {item._id} </td>
                {!this.state.hiddenCol.name && <td> {item.name} </td>}
                <td> {item.company} </td>
                <td> {item.email} </td>
                <td> {item.phone} </td>
              </tr>
            )
         })}
      </tbody>
   </table>
);
}
}

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

Answer 2

我尝试以一种更动态的方式来完成它，而无需多次重复代码。我为标题创建了一个名为tableHeader 的对象，并在状态中创建了一个数组来管理要隐藏的列索引，名为indexesToHide。然后我按列数进行迭代，如果给定的列索引在 indexesToHide 数组中，我不显示它。

这是一个工作代码 sn-p：https://stackblitz.com/edit/react-jhk9pk

代码如下：

import React, { Component } from 'react';
import { render } from 'react-dom';

var tableData = [
  {
    "_id": "5de8d7",
    "name": "Oneill Chang",
    "company": "TINGLES",
    "email": "oneillchang@tingles.com",
    "phone": "+1 (826) 583-3110"
  },
  {
    "_id": "5de8d5",
    "name": "Rogers Davis",
    "company": "ENTALITY",
    "email": "rogersdavis@entality.com",
    "phone": "+1 (918) 571-2672"
  },
  {
    "_id": "8d05243",
    "name": "Barlow Alford",
    "company": "BRISTO",
    "email": "barlowalford@bristo.com",
    "phone": "+1 (855) 527-2874"
  },
  {
    "_id": "6f5b6",
    "name": "Hopper Cote",
    "company": "BEZAL",
    "email": "hoppercote@bezal.com",
    "phone": "+1 (968) 565-2872"
  }
]

var tableHeader = {
  "_id": "ID",
  "name": "Name",
  "company": "Company",
  "email": "Email",
  "phone": "Phone"
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      data:[],
      indexesToHide: []
    };
  }

  componentDidMount(){
     this.setState({
       data:tableData
     })
  }

  hide( indexToHide ) {
    this.setState({ indexesToHide: this.state.indexesToHide.concat(indexToHide) });
  }

  render() {

    let header = Object.entries(tableHeader).map( (headerData, index) => {
      if( !this.state.indexesToHide.includes(index) )
        return <td> {headerData[1]} <br/> <button onClick={() => this.hide(index)}> Hide </button>  </td>
    });

    return (
       <table className="table" >
          <thead>
             <tr>
               {header}
             </tr>
          </thead>
          <tbody>
             {this.state.data.map((item,index)=>{

              let data = Object.entries(item).map( (itemData, index) => {
                if( !this.state.indexesToHide.includes(index) )
                 return <td> {itemData[1]} </td>
              });

              return( <tr> {data} </tr> )
             })}
          </tbody>
       </table>
    );
  }
}

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

Answer 3

您需要维护一个数组或其他东西来跟踪单击了哪个隐藏按钮。

<thead>
             <tr>
               <td> Id <br/> <button onClick={this.buttonClicked(0)}> Hide </button> </td>
               <td> Name <br/> <button onClick={this.buttonClicked(0)}> Hide </button> </td>
               <td> Company <br/> <button onClick={this.buttonClicked(0)}> Hide </button> </td>
               <td> Email <br/> <button onClick={this.buttonClicked(0)}> Hide </button> </td>
               <td> Phone <br/> <button onClick={this.buttonClicked(0)}> Hide </button> </td>
             </tr>
          </thead>

onClicked 按钮是

onButtonClicked = (rowNum) => {
  if(this.state.hiddenColumns.indexOf(rowNum) === -1 ) {
    const newArray = [...this.state.hiddenColumns, rowNum];
  }
}

最后在你的渲染中：

<tbody>
             {this.state.data.map((item,index)=>{
                return(
                  <tr>
                    this.state.hiddenColumns.indexOf(0) === -1 && <td> {item._id} </td>
                    this.state.hiddenColumns.indexOf(0) === -1 && <td> {item.name} </td>
                    this.state.hiddenColumns.indexOf(0) === -1 && <td> {item.company} </td>
                    this.state.hiddenColumns.indexOf(0) === -1 && <td> {item.email} </td>
                    this.state.hiddenColumns.indexOf(0) === -1 && <td> {item.phone} </td>
                  </tr>
                )
             })}
          </tbody>