如何使用 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}