Javascript 将选择框中的值作为React中的参数传递

我正在创建一个React应用程序，它需要更新状态并根据用户从选择框中选择的选项调用API。由于我无法将函数调用放入

标记中，因此在调用

onChange

时，我需要从选项标记中检索

值

我在应用程序状态中创建了一个
selectValue
值进行更新，并尝试在下面的帖子中模拟该解决方案


然而，我遇到的问题是，我不知道如何从所选选项中选择并传递
值

我已经通过在
ListBooks.js
文件中硬编码一个值来测试它。当我这样做时，状态会按预期更新

App.js

import React, { Component } from 'react'
import ListBooks from './ListBooks'
import * as BooksAPI from './utils/BooksAPI'
import { Route } from 'react-router-dom'

class BooksApp extends Component {
  state = {
    books: [],
    selectValue: 'wantToRead'
  }

  componentDidMount() {
    BooksAPI.getAll()
    .then((books) => {
      this.setState(() => ({
        books
      }))
    })
  }

  updateShelf = (book) => {
    const shelf = this.state.selectValue
    this.state.books.forEach(b => {
      if(b.id === book.id) {
        console.log('Shelf: ' + this.state.selectValue)
        b.shelf = shelf
        this.setState((currentState) => ({
          books: currentState.books
        }))
      }
    });
    BooksAPI.update(book, shelf)
  }

  handleSelectValue(option) {
    console.log('handleSelectValue: ' + option)
    this.setState((currentState) => ({
      selectValue: option
    }))
    console.log('handleSelectValue + selectValue: ' + option)
  }

  render() {
    return (
      <div>
        <Route exact path='/' render={() => (
          <ListBooks
          books={this.state.books}
          onUpdateShelf={this.updateShelf}
          onHandleSelectValue={this.handleSelectValue.bind(this)}
          />
        )} />
      </div>
    )
  }
}
export default BooksApp

import React，{Component}来自“React”
从“./ListBooks”导入ListBooks
从“/utils/BooksAPI”导入*作为BooksAPI
从“react router dom”导入{Route}
类BooksApp扩展组件{
状态={
书籍：[]，
选择值：“wantToRead”
}
componentDidMount（）{
BooksAPI.getAll（）
.然后（（书）=>{
此.setState（（）=>({
书
}))
})
}
UpdateSelf=（书本）=>{
const shelf=this.state.selectValue
this.state.books.forEach（b=>{
如果（b.id==book.id）{
console.log（'Shelf:'+this.state.selectValue）
b、 架子
this.setState（（当前状态）=>({
图书：currentState.books
}))
}
});
BooksAPI.update（书籍、书架）
}
handleSelectValue（选项）{
log（'handleSelectValue:'+选项）
this.setState（（当前状态）=>({
选择值：选项
}))
log（'handleSelectValue+selectValue:'+选项）
}
render（）{
返回(
(
)} />
)
}
}
导出默认BookApp

ListBooks.js

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './App.css'

const shelves = [
  {
    key: 'currentlyReading',
    name: 'Currently Reading'
  },
  {
    key: 'wantToRead',
    name: 'Want To Read'
  },
  {
    key: 'read',
    name: 'Read'
  },
  // {
  //   key: '',
  //   name: 'None'
  // }
];

class ListBooks extends Component {

    static propTypes = {
       books: PropTypes.array.isRequired
    }

    state = {
        showSearchPage: false,
        query: ''
      }

    render() {

        const { books, onUpdateShelf, onHandleSelectValue } = this.props

        function getBooksForShelf(shelfKey) {
          return books.filter(book => book.shelf === shelfKey);
        }

        console.log(books);

        return(
            <div className="app">
            {this.state.showSearchPage ? (
              <div className="search-books">
                <div className="search-books-bar">
                  <a className="close-search" onClick={() => this.setState({ showSearchPage: false })}>Close</a>
                  <div className="search-books-input-wrapper">
                    {/*
                      NOTES: The search from BooksAPI is limited to a particular set of search terms.
                      You can find these search terms here:
                      https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md
                      However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if
                      you don't find a specific author or title. Every search is limited by search terms.
                    */}
                    <input type="text" placeholder="Search by title or author"/>
                  </div>
                </div>
                <div className="search-books-results">
                  <ol className="books-grid"></ol>
                </div>
              </div>
            ) : (
              <div className="list-books">
                <div className="list-books-title">
                  <h1>My Reads</h1>
                </div>
                <div className="list-books-content">
                  <div>
                    { shelves.map((shelf) => (
                      <div key={shelf.key} className="bookshelf">
                        <h2 className="bookshelf-title">{shelf.name}</h2>
                          <div className="bookshelf-books">
                            <ol className="books-grid">
                        <li>
                          { getBooksForShelf(shelf.key).map((book) => (
                            <div key={book.id} className="book">
                              <div className="book-top">
                               <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.thumbnail})` }}></div>
                                <div className="book-shelf-changer"> 
                                 <select onChange={() => onUpdateShelf(book, onHandleSelectValue('read'))}>
                                  <option value="none" 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.author}</div>
                            </div>
                            ))}
                          </li>
                        </ol>
                        </div> 
                      </div>
                    )) }
                  </div>
                </div>
                <div className="open-search">
                  <a onClick={() => this.setState({ showSearchPage: true })}>Add a book</a>
                </div>
              </div>
            )}
          </div>
        )
    }
}

export default ListBooks

import React，{Component}来自'React'；
从“道具类型”导入道具类型
导入“./App.css”
常数托架=[
{
键：“currentlyReading”，
名称：“当前正在阅读”
},
{
键：“wantToRead”，
姓名：'想要阅读'
},
{
键：“读取”，
名称：“读取”
},
// {
//键：“”，
//姓名：“无”
// }
];
类ListBooks扩展组件{
静态类型={
书籍：需要PropTypes.array.isRequired
}
状态={
showSearchPage:false，
查询：“”
}
render（）{
const{books，onUpdateShelf，onHandleSelectValue}=this.props
函数getBooksForShelf（shelfKey）{
返回books.filter（book=>book.shelf===shelfKey）；
}
控制台。日志（书籍）；
返回(
{this.state.showSearchPage(
this.setState（{showSearchPage:false}}>Close
{/*
注意：BooksAPI中的搜索仅限于一组特定的搜索词。
您可以在此处找到这些搜索词：
https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md
但是，请记住BooksAPI.search方法是按标题或作者进行搜索的
您找不到特定的作者或标题。每次搜索都受到搜索词的限制。
*/}
) : (
我的书
{shelfs.map（（shelf）=>(
{shelf.name}

{getBooksForShelf（shelf.key）.map（（book）=>(
OnUpdate书架（书本，onHandleSelectValue（'read'））}>
搬到。。。
正在阅读
想读书吗
阅读
没有一个
{书名}
{book.author}
))}

)) }
this.setState（{showSearchPage:true}}>添加一本书
)}
)
}
}
导出默认列表簿
所以使用@Praveen Kumar提供的建议

我删除了额外的处理程序，只是更改了下面的一行，将
值
作为参数传递给selected选项

<select onChange={(e) => onUpdateShelf(book, e.target.value)}>

onUpdateShelf（book，e.target.value）}>
所以使用@Praveen Kumar提供的建议

我删除了额外的处理程序，只是更改了下面的一行，将
值
作为参数传递给selected选项

<select onChange={(e) => onUpdateShelf(book, e.target.value)}>

onUpdateShelf（book，e.target.value）}>
你能检查一下类似的
onUpdateShelf（book，onHandleSelectValue（e.target.value））
吗，可能会有帮助。你能检查一下类似的
onUpdateShelf（book，onHandleSelectValue（e.target.value））
，可能会有帮助。