使用 React，如何在单击时隐藏 table 行？

Question

大家好，我正在使用这个 table 来显示数据，并且我在每一行中添加了一个按钮。当我点击旁边的隐藏按钮时，如何隐藏一行？

我知道在 html 个元素中执行的方法，但不确定如何在循环 table 中隐藏特定行

任何人都可以告诉我如何完成这个吗？

谢谢

import React, { Component } from 'react'

class Table extends Component {
   constructor(props) {
      super(props) //since we are extending class Table so we have to use super in order to override Component class constructor
      this.state = { //state is by default an object
         students: [
            { id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com' },
            { id: 2, name: 'Ali', age: 19, email: 'ali@email.com' },
            { id: 3, name: 'Saad', age: 16, email: 'saad@email.com' },
            { id: 4, name: 'Asad', age: 25, email: 'asad@email.com' }
         ]
      }
   }

   renderTableData() {
    return this.state.students.map((student, index) => {
       const { id, name, age, email } = student //destructuring
       return (
          <tr key={id}>
             <td>{id}</td>
             <td>{name}</td>
             <td>{age}</td>
             <td>{email}</td>
             <td><button>HIDE</button></td>
          </tr>
       )
    })



 }
renderTableHeader() {
      let header = Object.keys(this.state.students[0])
      return header.map((key, index) => {
         return <th key={index}>{key.toUpperCase()}</th>
      })
   }







   render() { //Whenever our class runs, render method will be called automatically, it may have already defined in the constructor behind the scene.
    return (
      <div>
         <h1 id='title'>React Dynamic Table</h1>
         <table id='students'>
            <tbody>
               <tr>{this.renderTableHeader()}</tr>
               {this.renderTableData()}
            </tbody>
         </table>
      </div>
   )
}
}

export default Table

Answer 1

在所有对象中添加一个 isVisible 键，例如

 students: [
            { id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com', isVisible: true },
            { id: 2, name: 'Ali', age: 19, email: 'ali@email.com', isVisible: true },
            { id: 3, name: 'Saad', age: 16, email: 'saad@email.com', isVisible: true },
            { id: 4, name: 'Asad', age: 25, email: 'asad@email.com', isVisible: true }
         ]

然后在渲染行函数中执行此操作

renderTableData() {
    return this.state.students.map((student, index) => {
       const { id, name, age, email, isVisible } = student
       return isVisible ? (
          <tr key={id}>
             <td>{id}</td>
             <td>{name}</td>
             <td>{age}</td>
             <td>{email}</td>
             <td><button>HIDE</button></td>
          </tr>
       ) : null
    })

在button/row点击更新状态。

Answer 2

您可以向 button 添加一个 onClick 处理程序，它添加一个属性来确定 student 是否应该被隐藏。

注意下面的 onClick={() => this.hideRow(id)}。

renderTableData() {
  return this.state.students.map((student, index) => {
    const { id, name, age, email, isHidden } = student; //destructuring

    // isHidden will default to undefined if not found on the student object
    
    // user is hidden
    if (isHidden === true) {
      return null;
    }

    return (
      <tr key={id}>
        <td>{id}</td>
        <td>{name}</td>
        <td>{age}</td>
        <td>{email}</td>
        <td>
          <button onClick={() => this.hideRow(id)}>HIDE</button>
        </td>
      </tr>
    );
  });
}

hideRow 方法将接受一个学生 id 并将向具有 id 的学生添加一个 isHidden: true 属性。

hideRow(id) {
  const students = this.state.students.map((student) => {
    // not same id? leave as is
    if (student.id !== id) {
      return student;
    }

    return { ...student, isHidden: true };
  });

  this.setState({ students });
}

现在您不想显示 isHidden 列，因此您必须更新 renderTableHeader 方法以跳过它。

renderTableHeader() {
  let header = Object.keys(this.state.students[0]);
  return header.map((key, index) => {
   
    // notice this
    if (key === "isHidden") {
      return null;
    }

    return <th key={index}>{key.toUpperCase()}</th>;
  });
}

Answer 3

Try this code

import React, { Component } from "react";

class Table extends Component {
  constructor(props) {
    super(props); //since we are extending class Table so we have to use super in order to override Component class constructor
    this.state = {
      //state is by default an object
      students: [
        { id: 1, name: "Wasif", age: 21, email: "wasif@email.com", toggle: true},
        { id: 2, name: "Ali", age: 19, email: "ali@email.com", toggle: true },
        { id: 3, name: "Saad", age: 16, email: "saad@email.com", toggle: true},
        { id: 4, name: "Asad", age: 25, email: "asad@email.com", toggle: true }
      ]
    };
  }
  handleClick(index) {
    let students = [...this.state.students];
    students[index].toggle = !students[index].toggle;
    this.setState({ students });
  }
  renderTableData() {
    return this.state.students.map((student, index) => {
      const { id, name, age, email, toggle } = student; //destructuring
      if (toggle) {
        return (
          <tr key={id}>
            <td>{id}</td>
            <td>{name}</td>
            <td>{age}</td>
            <td>{email}</td>
            <`td`>
              <button
                value={index}
                onClick={(e) => this.handleClick(e.target.value)}
              >
                Hide
              </button>
            </td>
          </tr>
        );
      } else {
        return null;
      }
    });
  }
  renderTableHeader() {
    let header = Object.keys(this.state.students[0]);
    return header.map((key, index) => {
      return <th key={index}>{key.toUpperCase()}</th>;
    });
  }

  render() {
    //Whenever our class runs, render method will be called automatically, it may have already defined in the constructor behind the scene.
    return (
      <div>
        <h1 id="title">React Dynamic Table</h1>
        <table id="students">
          <tbody>
            <tr>{this.renderTableHeader()}</tr>
            {this.renderTableData()}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;

Answer 4

按照以下步骤操作：

点击按钮
将数组作为 props 传递给组件
在下一个组件上显示数组
为其添加onclick方法，该方法也作为主组件的道具传递（传递id作为参数）
在该方法中，当您单击它时，使用过滤器数组删除您选择的行。代码如下：

https://codesandbox.io/s/modern-tdd-mlmzl?file=/src/components/Table.js

使用 React，如何在单击时隐藏 table 行？

Using react, how would I hide a table row on click?

javascript

json

hide

reactjs