ReactJS实现表格多列筛选：如何添加地块编号筛选条件？

第一步：拆分搜索状态 #

你当前的核心问题是两个搜索框共用了同一个search状态，导致输入时会互相覆盖。需要给每个搜索框单独设置状态变量：

// 在组件顶部添加两个独立的状态
const [searchName, setSearchName] = useState('');
const [searchPlotNo, setSearchPlotNo] = useState('');

第二步：绑定对应状态更新函数 #

修改两个输入框的onChange事件，分别关联到对应的状态更新方法：

<div class="input-group mb-3">
  <form>
    <input 
      type='text' 
      className="form-control searchBar" 
      placeholder='Search by Name' 
      onChange={(e)=> setSearchName(e.target.value)}
    />
  </form>
  <form>
    <input 
      type='text' 
      className="form-control searchBar" 
      placeholder='Search by Plot No' 
      onChange={(e)=> setSearchPlotNo(e.target.value)}
    />
  </form>
</div>

第三步：更新筛选逻辑 #

不需要编写多个filter语句，在同一个filter中同时判断两个筛选条件即可。根据需求选择以下两种逻辑之一：

逻辑1：同时满足姓名和地块号筛选（AND） #

只有同时匹配姓名和地块号的结果才会显示：

{properties.filter((row) => {
  // 姓名筛选：空输入则匹配所有，否则检查是否包含搜索词（统一转小写避免大小写问题）
  const matchesName = searchName.toLowerCase() === '' || row.Name.toLowerCase().includes(searchName.toLowerCase());
  // 地块号筛选：空输入则匹配所有，转字符串避免数字类型匹配问题
  const matchesPlotNo = searchPlotNo === '' || row["Plot No"].toString().includes(searchPlotNo);
  
  return matchesName && matchesPlotNo;
}).map((row) => (
  // 原有TableRow渲染逻辑保持不变
))}

逻辑2：满足任意一个筛选条件即可（OR） #

只要匹配姓名或地块号其中一个条件就显示结果：

return matchesName || matchesPlotNo;

完整修改后的return代码 #

return (
  <>
    <div class="input-group mb-3">
      <form>
        <input 
          type='text' 
          className="form-control searchBar" 
          placeholder='Search by Name' 
          onChange={(e)=> setSearchName(e.target.value)}
        />
      </form>
      <form>
        <input 
          type='text' 
          className="form-control searchBar" 
          placeholder='Search by Plot No' 
          onChange={(e)=> setSearchPlotNo(e.target.value)}
        />
      </form>
    </div>
    {isLoading ? 
      <div className='circle'>
        <Box sx={{ display: 'flex' }}>
          <CircularProgress />
          <h1>Loading</h1>
        </Box>
      </div> :
      <div>
        <TableContainer component={Paper}>
          <Table sx={{ minWidth: 650 }} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell align="left">Sector</TableCell>
                <TableCell align="left">Plot No</TableCell>
                <TableCell align="left">Street</TableCell>
                <TableCell align="left">Size</TableCell>
                <TableCell align="left">Name</TableCell>
                <TableCell align="left">Contact No</TableCell>
                <TableCell align="left">Address</TableCell>
                <TableCell align="left">Action</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {properties.filter((row) => {
                const matchesName = searchName.toLowerCase() === '' || row.Name.toLowerCase().includes(searchName.toLowerCase());
                const matchesPlotNo = searchPlotNo === '' || row["Plot No"].toString().includes(searchPlotNo);
                return matchesName && matchesPlotNo; // 可根据需求替换为||
              }).map((row) => (
                <TableRow
                  key={row._id}
                  sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                > 
                  <TableCell align="left">{row.Sector}</TableCell>
                  <TableCell align="left">{row["Plot No"]}</TableCell>
                  <TableCell align="left">{row.Street}</TableCell>
                  <TableCell align="left">{row.Size}</TableCell>
                  <TableCell align="left">{row.Name}</TableCell>
                  <TableCell align="left">{row["Contact No"]}</TableCell>
                  <TableCell align="left">{row.Address}</TableCell>
                  <TableCell align="left" >
                    <Link to={`/property/${row._id}`}>
                      <Button variant='contained'>Details</Button>
                    </Link>
                  </TableCell>             
                </TableRow>            
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </div>
    }
  </>
);

内容的提问来源于stack exchange，提问作者user3305642