Как создать отфильтрованную поисковую таблицу с помощьюactJ Попытка заставить мою панель поиска фильтровать информацию в таблице

Question

Я пытаюсь заставить мою панель поиска фактически фильтровать информацию в моей таблице. Я создал таблицу и панель поиска, но в данный момент панель поиска не имеет никакой функциональности. Прямо сейчас я могу ввести в поле поиска, но ничего не происходит. Я думаю, что это может быть связано с тем, что я использую реагировать, а не только 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 = {туРипсЫоп}