问题

在下面的React组件的返回语句中，我有两个搜索框。按名称搜索正常工作，但是如何添加另一个搜索条件以按Plot No搜索呢？
是否可以在同一个过滤语句中添加另一个三元运算符？还是我需要为Plot No列编写单独的语句？

return (
    <>
        <div class="input-group mb-3">
            <form>
                <input type='text' className="form-control searchBar" placeholder='按名称搜索' onChange={(e)=> setSearch(e.target.value)}></input>
            </form>

            <form>
                <input type='text' className="form-control searchBar" placeholder='按Plot No搜索' onChange={(e)=> setSearch(e.target.value)}></input>
            </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) =>{
                            return search.toLowerCase() === '' ? row : row.Name.toLowerCase().includes(search)
                        }).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>}
    </>
)}

英文:

In below react component return statement I have two search boxes. Search by name is working fine but how can i add another search criteria to search by Plot No.
Is it possible to add another turnery operator in same filter statement? or do I need to write separate statement for Plot No column?

**return (
&lt;&gt;
&lt;div class=&quot;input-group mb-3&quot;&gt;
&lt;form&gt;
&lt;input type=&#39;text&#39; className=&quot;form-control searchBar&quot; placeholder=&#39;Search by Name&#39; onChange={(e)=&gt; setSearch(e.target.value)}&gt;&lt;/input&gt;
&lt;/form&gt;
&lt;form&gt;
&lt;input type=&#39;text&#39; className=&quot;form-control searchBar&quot; placeholder=&#39;Search by Plot No&#39; onChange={(e)=&gt; setSearch(e.target.value)}&gt;&lt;/input&gt;
&lt;/form&gt;
&lt;/div&gt;
{isLoading ? 
&lt;div className=&#39;circle&#39;&gt;
&lt;Box sx={{ display: &#39;flex&#39; }}&gt;
&lt;CircularProgress /&gt;
&lt;h1&gt;Loading&lt;/h1&gt;
&lt;/Box&gt;
&lt;/div&gt;:
&lt;div&gt;
&lt;TableContainer component={Paper}&gt;
&lt;Table sx={{ minWidth: 650 }} aria-label=&quot;simple table&quot;&gt;
&lt;TableHead&gt;
&lt;TableRow&gt;
&lt;TableCell align=&quot;left&quot;&gt;Sector&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Plot No&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Street&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Size&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Name&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Contact No&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Address&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Action&lt;/TableCell&gt;
&lt;/TableRow&gt;
&lt;/TableHead&gt;
&lt;TableBody&gt;
{properties.filter((row) =&gt;{
return search.toLowerCase() === &#39;&#39; ? row : row.Name.toLowerCase().includes(search)}).map((row) =&gt; (
&lt;TableRow
key={row._id
}
sx={{ &#39;&amp;:last-child td, &amp;:last-child th&#39;: { border: 0 } }}
&gt; 
&lt;TableCell align=&quot;left&quot;&gt;{row.Sector}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row[&quot;Plot No&quot;]}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row.Street}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row.Size}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row.Name}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row[&quot;Contact No&quot;]}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row.Address}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot; &gt;
&lt;Link to ={`/property/${row._id}` }&gt;
&lt;Button variant=&#39;contained&#39;&gt;Details&lt;/Button&gt;
&lt;/Link&gt;
&lt;/TableCell&gt;             
&lt;/TableRow&gt;            
))}
&lt;/TableBody&gt;
&lt;/Table&gt;
&lt;/TableContainer&gt;
&lt;/div&gt;}
&lt;/&gt;
)}**

答案1

得分: 0

你可以修改过滤函数以通过名称和地块号进行搜索：

return (
    <>
        <div className="input-group mb-3">
            <form>
                <input
                    type='text'
                    className="form-control searchBar"
                    placeholder='按名称搜索'
                    onChange={(e) => setSearch(e.target.value)}
                />
            </form>

            <form>
                <input
                    type='text'
                    className="form-control searchBar"
                    placeholder='按地块号搜索'
                    onChange={(e) => setSearchPlotNo(e.target.value)} {/* Cần tạo state mới cho việc tìm kiếm theo Plot No */}
                />
            </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">区块</TableCell>
                                <TableCell align="left">地块号</TableCell>
                                <TableCell align="left">街道</TableCell>
                                <TableCell align="left">面积</TableCell>
                                <TableCell align="left">名称</TableCell>
                                <TableCell align="left">联系电话</TableCell>
                                <TableCell align="left">地址</TableCell>
                                <TableCell align="left">操作</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {properties
                                .filter((row) =>
                                    search.toLowerCase() === '' ||
                                    row.Name.toLowerCase().includes(search) ||
                                    row["Plot No"].toLowerCase().includes(searchPlotNo) // Sử dụng state tìm kiếm mới
                                )
                                .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'>详情</Button>
                                            </Link>
                                        </TableCell>
                                    </TableRow>
                                ))}
                        </TableBody>
                    </Table>
                </TableContainer>
            </div>
        )}
    </>
)}

英文:

You can modify the filter function to search by both Name and Plot No:

return (
&lt;&gt;
&lt;div className=&quot;input-group mb-3&quot;&gt;
&lt;form&gt;
&lt;input
type=&#39;text&#39;
className=&quot;form-control searchBar&quot;
placeholder=&#39;Search by Name&#39;
onChange={(e) =&gt; setSearch(e.target.value)}
/&gt;
&lt;/form&gt;
&lt;form&gt;
&lt;input
type=&#39;text&#39;
className=&quot;form-control searchBar&quot;
placeholder=&#39;Search by Plot No&#39;
onChange={(e) =&gt; setSearchPlotNo(e.target.value)} {/* Cần tạo state mới cho việc t&#236;m kiếm theo Plot No */}
/&gt;
&lt;/form&gt;
&lt;/div&gt;
{isLoading ? (
&lt;div className=&#39;circle&#39;&gt;
&lt;Box sx={{ display: &#39;flex&#39; }}&gt;
&lt;CircularProgress /&gt;
&lt;h1&gt;Loading&lt;/h1&gt;
&lt;/Box&gt;
&lt;/div&gt;
) : (
&lt;div&gt;
&lt;TableContainer component={Paper}&gt;
&lt;Table sx={{ minWidth: 650 }} aria-label=&quot;simple table&quot;&gt;
&lt;TableHead&gt;
&lt;TableRow&gt;
&lt;TableCell align=&quot;left&quot;&gt;Sector&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Plot No&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Street&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Size&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Name&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Contact No&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Address&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;Action&lt;/TableCell&gt;
&lt;/TableRow&gt;
&lt;/TableHead&gt;
&lt;TableBody&gt;
{properties
.filter((row) =&gt;
search.toLowerCase() === &#39;&#39; ||
row.Name.toLowerCase().includes(search) ||
row[&quot;Plot No&quot;].toLowerCase().includes(searchPlotNo) // Sử dụng state t&#236;m kiếm mới
)
.map((row) =&gt; (
&lt;TableRow
key={row._id}
sx={{ &#39;&amp;:last-child td, &amp;:last-child th&#39;: { border: 0 } }}
&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row.Sector}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row[&quot;Plot No&quot;]}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row.Street}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row.Size}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row.Name}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row[&quot;Contact No&quot;]}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;{row.Address}&lt;/TableCell&gt;
&lt;TableCell align=&quot;left&quot;&gt;
&lt;Link to={`/property/${row._id}`}&gt;
&lt;Button variant=&#39;contained&#39;&gt;Details&lt;/Button&gt;
&lt;/Link&gt;
&lt;/TableCell&gt;
&lt;/TableRow&gt;
))}
&lt;/TableBody&gt;
&lt;/Table&gt;
&lt;/TableContainer&gt;
&lt;/div&gt;
)}
&lt;/&gt;
)}

答案2

得分: 0

我可以通过以下修改来解决这个问题。

{properties.filter((row) => {
    return search.toLowerCase() === '' ? row : row.Name.toLowerCase().includes(search) || row["Plot No"].includes(search)
}).map((row) => (

但是，每个文本框仍然会搜索整个表格，而我希望从已过滤的结果中筛选结果。

英文:

I am able to resolve this issue by below modification.

{properties.filter((row) =&gt;{
return search.toLowerCase() === &#39;&#39; ? row : row.Name.toLowerCase().includes(search) || row[&quot;Plot No&quot;].includes(search) }).map((row) =&gt; (

But still Each Text box searches entire table. while i want to filter results from filtered results.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何在React.js中筛选多个表格列

问题

答案1

答案2

“以对象类型的键获取的数据未定义？”

如何在服务工作者内部监听请求中止事件？

React支持每秒多少次useState更新？

React Router v6，使用Context API进行路由保护的路由

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论