Блог

Эй, ребята, я использую эту таблицу для отображения данных, и я добавил кнопку к каждой строке. Как я мог бы скрыть строку, когда я нажимаю кнопку скрыть рядом с ней?

Я знаю, как это сделать в html-элементах, но не уверен, как скрыть конкретную строку в таблице, которая находится в цикле

Кто-нибудь может показать мне, как это сделать?

Спасибо

 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 
  

Вы могли бы добавить onClick обработчик к button , который добавляет свойство, определяющее, 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 Метод примет student id и добавит isHidden: true атрибут к student с этим id .

 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>;
  });
}
  

Добавьте ключ 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
    })

  

При нажатии кнопки / строки обновите состояние.

 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;
  

Выполните следующие действия:

1. Поместите onclick на кнопку
2. Передайте массив в качестве реквизита компоненту
3. В следующем компоненте отобразите массив
4. Добавьте к нему метод onclick, который также передается в качестве реквизита из основного компонента (передайте идентификатор в качестве параметра)
5. В методе используйте массив фильтров, чтобы удалить выбранную вами строку при нажатии на нее. Код выглядит следующим образом:

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