React 部分使用中实践2

再加一个filter输入框，名字为filter by serviceName,实现通过输入serviceName就可以搜索表格的某一项

要实现通过输入serviceName来搜索表格的某一项，可以在HealthReportTable组件中添加一个输入框元素，并使用filter()方法根据输入的serviceName筛选数据。以下是修改后的代码示例：

import React, { useEffect, useState } from 'react'; const HealthReportTable = () => { const [healthReport, setHealthReport] = useState([]); const [filterValue, setFilterValue] = useState(''); const fetchHealthReport = () => { fetch('/healthReport') .then(response => response.json()) .then(data => setHealthReport(data)) .catch(error => console.log(error)); }; useEffect(() => { fetchHealthReport(); }, []); const handleRefresh = () => { fetchHealthReport(); }; const handleFilterChange = (event) => { setFilterValue(event.target.value); }; const filteredReport = healthReport.filter(report => report.serviceName.toLowerCase().includes(filterValue.toLowerCase())); return ( <div> <h2>Health Report</h2> <button onClick={handleRefresh}>Refresh</button> <input type="text" placeholder="Filter by serviceName" value={filterValue} onChange={handleFilterChange} /> <table> <thead> <tr> <th>Service Name</th> <th>Workspace</th> <th>Status</th> </tr> </thead> <tbody> {filteredReport.map((report, index) => ( <tr key={index}> <td>{report.serviceName}</td> <td>{report.workspace}</td> <td>{report.status ? 'true' : 'false'}</td> </tr> ))} </tbody> </table> </div> ); }; export default HealthReportTable; 

在修改后的代码中，我们添加了一个输入框元素，并为其添加了一个onChange事件处理程序handleFilterChange。在输入框中输入serviceName时，handleFilterChange函数会更新filterValue状态来反映输入的值。

然后，我们使用filter()方法来根据filterValue筛选healthReport数组，只保留那些serviceName包含filterValue的项。筛选后的结果存储在filteredReport变量中，并在渲染表格时使用该变量。

请注意，在筛选时，我们将serviceName和filterValue都转换为小写字母，以便实现不区分大小写的搜索。这样，无论用户输入的是大写字母还是小写字母，都能正确匹配。

然后输入框放到表格右上方

要将输入框放到表格右上方，可以使用CSS样式来定位和布局元素。以下是修改后的代码示例：

import React, { useEffect, useState } from 'react'; const HealthReportTable = () => { const [healthReport, setHealthReport] = useState([]); const [filterValue, setFilterValue] = useState(''); const fetchHealthReport = () => { fetch('/healthReport') .then(response => response.json()) .then(data => setHealthReport(data)) .catch(error => console.log(error)); }; useEffect(() => { fetchHealthReport(); }, []); const handleRefresh = () => { fetchHealthReport(); }; const handleFilterChange = (event) => { setFilterValue(event.target.value); }; const filteredReport = healthReport.filter(report => report.serviceName.toLowerCase().includes(filterValue.toLowerCase())); return ( <div> <h2>Health Report</h2> <button onClick={handleRefresh}>Refresh</button> <div style={{ textAlign: 'right', marginBottom: '10px' }}> <input type="text" placeholder="Filter by serviceName" value={filterValue} onChange={handleFilterChange} /> </div> <table> <thead> <tr> <th>Service Name</th> <th>Workspace</th> <th>Status</th> </tr> </thead> <tbody> {filteredReport.map((report, index) => ( <tr key={index}> <td>{report.serviceName}</td> <td>{report.workspace}</td> <td>{report.status ? 'true' : 'false'}</td> </tr> ))} </tbody> </table> </div> ); }; export default HealthReportTable; 

在修改后的代码中，我们使用内联样式将输入框放置在一个带有textAlign: 'right'和marginBottom: '10px'样式的

const express = require('express'); const app = express(); const healthReport = [ { serviceName: 'rest', workspace: 'default', status: true }, { serviceName: 'graphql', workspace: 'default', status: false }, { serviceName: 'rest', workspace: 'production', status: true }, { serviceName: 'grpc', workspace: 'production', status: true } ]; app.get('/healthReport', (req, res) => { const filteredReport = healthReport.filter(report => report.serviceName === 'rest'); res.json(filteredReport); }); app.listen(3000, () => { console.log('Server is running on port 3000'); });