我创建了一个文件,该文件从数据库中获取数据并以手风琴形式以表格形式显示。我想向该文件添加搜索过滤器,但是当我尝试添加它时,我的手风琴无法再使用了。
非常感谢您的帮助。下面是代码。
Accordion.js
class Accordion extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: null,
loading: true,
error: null
};
}
componentDidMount() {
axios.get(`data from db`)
.then(res => {
const posts = res.data;
this.setState({
posts,
loading: false,
error: null
});
})
.catch(err => {
this.setState({
loading: false,
error: true
});
});
}
renderLoading() {
return (
<div className="accordion-container">
<h1 className="error">Loading...</h1>
</div>
);
}
renderError() {
return (
<div>
error
</div>
);
}
renderPosts() {
const { posts, loading, error } = this.state;
if (error) {
this.renderError();
}
return (
// <div className="accordion-container">
// <h1>Accordion Component</h1>
<div>
<Table style={{tableLayout:"fixed",backgroundColor:"#D9D9E7"}}>
<TableHead >
<TableRow >
<TableCell style={{width:'20px'}}></TableCell>
<TableCell style={{fontWeight: "bold"}} >NAME</TableCell>
<TableCell style={{fontWeight: "bold"}} >LEVEL</TableCell>
<TableCell style={{fontWeight: "bold"}} >EMPLOYEE ID</TableCell>
<TableCell style={{fontWeight: "bold"}} >ENTERPRISE ID</TableCell>
<TableCell style={{fontWeight: "bold"}} >PROJECT NAME</TableCell>
<TableCell style={{fontWeight: "bold"}} >PROJECT MANAGER</TableCell>
<TableCell style={{fontWeight: "bold"}} >WORK LOCATION</TableCell>
</TableRow>
</TableHead>
</Table>
<div>
{posts.map(post =>
<Section post={post} key={post.employeeid} />
)}
</div>
</div>
);
}
render() {
const { loading } = this.state;
return (
<div>
{loading ? this.renderLoading() : this.renderPosts()}
</div>
);
}
}
Section.js
class Section extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
className: 'accordion-content accordion-close',
headingClassName: 'accordion-heading'
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
const { open } = this.state;
if (open) {
this.setState({
open: false,
className: "accordion-content accordion-close",
headingClassName: "accordion-heading"
});
} else {
this.setState({
open: true,
className: "accordion-content accordion-open",
headingClassName: "accordion-heading clicked"
});
}
}
render() {
const post = this.props.post;
const { className } = this.state;
const { headingClassName } = this.state;
console.log(headingClassName);
return (
<div>
<div className="parent-accordion">
<div className={headingClassName} onClick={this.handleClick}>
{/* {post.name} */}
<Table>
<TableBody>
<TableRow>
<TableCell>{post.name}</TableCell>
<TableCell>{post.level}</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
<div className={className}>
<Table>
<TableBody>
<TableRow>
<TableCell ><div style={{ fontSize: '12px', fontWeight: 'bold'
}}>Primary Skill</div><br />{post.primaryskill}</TableCell>
<TableCell ><div style={{ fontSize: '12px', fontWeight: 'bold'
}}>Gender</div><br />{post.gender}</TableCell>
</div>
</div>
</div>
);
}
}
我尝试使用Internet上显示的搜索过滤器,但不适用于我的代码。基本上,该表显示了来自数据库的数据。单击一列数据(例如名称)后,手风琴将打开并显示更多详细信息。
您可以使用两种状态,一种状态存储从axios调用获取的所有数据,另一种状态进行过滤:
步骤:
再添加两个状态,一个用于您使用的文本,另一个用于结果:
this.state = {
posts: null,
filteredPosts: null,
filtersSearch: '',
loading: true,
error: null
};
当执行axios时,还要设置过滤后的帖子:
componentDidMount() {
axios.get(`data from db`)
.then(res => {
const posts = res.data;
this.setState({
posts,
filteredPosts: posts,
loading: false,
error: null
});
})
.catch(err => {
this.setState({
loading: false,
error: true
});
});
}
[创建一个设置已过滤帖子的功能:
filterPosts = (e) => {
const value = e.target.value;
const filteredPosts = this.state.posts.filter((post) => post.name.includes(value);
this.setState({
filteredPosts,
filtersSearch: value
);
}
使用输入进行过滤:
<input onChange={(e) => this.filterPosts(e)}
更改已过滤帖子的帖子:
{filteredPosts.map(post =>
<Section post={post} key={post.employeeid} />
)}