Understanding the value of this inside of Class methods

Question

I am building a class with several methods and coming from React, I was using this syntax:

class Library {
  constructor(bookSearch) {
    this.bookSearch = bookSearch;
    this.bookSearch.addEventListener("keyup", this.searchBook);
  }

searchBook = () => {
    let searchValue = this.bookSearch.value;

    //Create a DOM collection of Books:
    const bookCollection = document.querySelectorAll('.book');

    for (const book of bookCollection) {
      if( !book.querySelector('.card-title').textContent.toLowerCase().includes( searchValue.toLowerCase() ) ) {
        book.style.display = 'none';
      } else {
        book.style.display = 'block';
      }
    }
  }

This is working just fine, the value of this is what I expected. When I tried bundling my app, apparently this is experimental syntax that is just in proposal and not entirely valid as of today. If I write the searchBook method like this:

searchBook() {
    let searchValue = this.bookSearch.value;

    //Create a DOM collection of Books:
    const bookCollection = document.querySelectorAll('.book');

    for (const book of bookCollection) {
      if( !book.querySelector('.card-title').textContent.toLowerCase().includes( searchValue.toLowerCase() ) ) {
        book.style.display = 'none';
      } else {
        book.style.display = 'block';
      }
    }
  }

The first line, "this.bookSearch.value;" is undefined. How should I approach this?

I'd liked the idea of using arrow functions as the value of this is clearer to me and I could compile this using "@babel/plugin-proposal-class-properties" but also, I'd like to know how to use the regular method syntax without the arrow. Should I be looking at "bind"?