как зафиксировать значение реквизита внутри функции атрибута события при использовании на нем функции карты

Question

Я очень новичок в React и JS. Так что внутри этого jsx у меня есть массив this.props.searchresult, и каждый элемент является объектом. Поэтому я использую функцию map для создания элемента li для каждого объекта, а также внутри li есть тег select, который имеет несколько тегов option. Я хочу использовать функцию атрибута события onChange() для выбора.

Но проблема в том, как передать это значение book в функцию триггера события?

{this.props.searchresult.map((book) => (
  <li key={book.id}>
    <div className="book">
      <div className="book-top">
        <div 
          className="book-cover" 
          style={{ 
            width: 128, 
            height: 193, 
            backgroundImage: `url(${book.imageLinks.thumbnail})`
          }}
        />
        <div className="book-shelf-changer">
          ***<select onChange={this.updateBookStatus}>***
            <option value="move" disabled>Move to...</option>
            <option value="currentlyReading">Currently Reading</option>
            <option value="wantToRead">Want to Read</option>
            <option value="read">Read</option>
            <option value="none">None</option>
          </select>
        </div>
      </div>
    <div className="book-title">{book.title}</div>
    <div className="book-authors">{book.authors}</div>
  </div>
 </li>         
))}

By Кстати, моя функция запуска события

updateBookStatus = (event) => {
  const val = event.target.value;

  // const bookObj = {
  //   id: book.id,
  //   imageURL: book.imageLinks.thumbnail,
  //   title: book.title,
  //   authors: book.authors
  // };
  // this.props.moveToReading(bookObj);

  console.log(`The value is ${val}`);
  // console.log(`The current book is ${book}`)
}

Answer 1

Попробуйте это

updateBookStatus = (event, book) => {
    // your code here
}

и на вашем компоненте

<select onChange={event => this.updateBookStatus(event, book)}>

Я просто создаю функцию, которая принимает 2 аргумента, и отправляю значение события и книги в качестве параметра.

Answer 2

Для передачи балансовой стоимости и четных значений в функцию updateBookStatus используйте функцию стрелки свойства ES6. См. Код ниже

  <select onChange={(event) => this.updateBookStatus(event, book)}>
            <option value="move" disabled>Move to...</option>
            <option value="currentlyReading">Currently Reading</option>
            <option value="wantToRead">Want to Read</option>
            <option value="read">Read</option>
            <option value="none">None</option>
          </select>

Здесь {(событие) => this.updateBookStatus (event, book)} updateBookStatus имеет два аргумента: один - одно событие, а другой - балансовая стоимость. Аргументы события могут использоваться для получения выбранного элемента event.target.value