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}

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

1 个答案: