问题描述
大家好，我正在使用此表显示数据，并在每行中添加了一个按钮。单击行旁边的“隐藏”按钮后，如何隐藏行？
我知道在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
解决方法
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",{ 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;
在所有对象中添加一个isVisible键，例如
students: [
{ id: 1,name: 'Wasif',email: 'wasif@email.com',isVisible: true },name: 'Ali',email: 'ali@email.com',name: 'Saad',email: 'saad@email.com',name: 'Asad',email: 'asad@email.com',isVisible: true }
]
然后在渲染行功能中执行此操作
renderTableData() {
return this.state.students.map((student,index) => {
const { id,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
})
在按钮/行上单击更新状态。
,您可以在onClick上添加一个button处理函数，以添加一个确定student是否应该隐藏的属性。
请注意下面的onClick={() => this.hideRow(id)}。
renderTableData() {
return this.state.students.map((student,index) => {
const { id,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，并将为具有该isHidden: true的学生添加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>;
});
}
请按照以下步骤操作：
- 点击按钮
- 将数组作为道具传递给组件
- 在下一个组件上显示数组
- 向其中添加onclick方法，该方法也作为道具从主要组件传递（通过id作为参数）
- 在该方法中，单击过滤器数组可删除您选择的行。 代码如下：
https://codesandbox.io/s/modern-tdd-mlmzl?file=/src/components/Table.js