如何使用 reactJS 创建过滤搜索表.尝试让我的搜索栏过滤表格中的信息

Question

我正在尝试让我的搜索栏实际过滤表中的信息。我已经创建了一个表格和一个搜索栏，但搜索栏目前没有任何功能。现在我可以在搜索框中输入，但没有任何反应。我认为这可能与我正在使用 react 而不仅仅是 JS 的事实有关。我只是希望能够按名称搜索(所以第一列中的信息(。我对创建组件不是很熟悉，并且查看了每个教程并观看了无休止的视频，但无法获得任何工作。任何事情都会有所帮助，谢谢！

这是我的代码：

class App extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<Route
path="/list"
exact
strict
render={() => {
function myFunction() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var tr = table.getElementsByTagName("tr");
var td, i;
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
return (
<div>
<div className="spacing overflow">
<input
type="search"
id="myInput"
onsearch="myFunction()"
onkeyup="myFunction()"
placeholder="Search Here"
/>
<table className="table table-bordered" id="myTable">
<tr>
<th> Name </th>
<th> API </th>
<th> Product </th>
</tr>
<tr>
<td>
<a href="http://localhost:3000/expert"> Expert</a>{" "}
</td>
<td>
<a href="http://localhost:3000/list-expert">
Credit{" "}
</a>
</td>
<td> ADD NAME </td>
</tr>
<tr>
<td>
<a href="http://localhost:3000/Lex"> Lex </a>
</td>
<td>
<a href="http://localhost:3000/list-lex"> Phone</a>
</td>
<td> ADD NAME </td>
</tr>
<tr>
<td>
<a href="http://localhost:3000/Lex"> Lex </a>
</td>
<td>
<a href="http://localhost:3000/list-lex"> IM</a>
</td>
<td> ADD NAME </td>
</tr>
<tr>
<td>
<a href="http://localhost:3000/star"> star</a>
</td>
<td>
<a href="http://localhost:3000/list-star"> Verify</a>
</td>
<td> ADD NAME </td>
</tr>
</table>
</div>
</div>
);
}}
/>
</div>
</BrowserRouter>
);
}
}

Answer 1

我只是在myFunction周围缺少{}而不是" " 所以它应该看起来像这样：

onKeyUp={myFunction}