如何根据 Reactjs 中的选定选项将数组项添加到新视图答案

【问题标题】：How to add an array item to a new view according to a selected option in Reactjs如何根据 Reactjs 中的选定选项将数组项添加到新视图
【发布时间】：2017-10-11 16:56:56
【问题描述】：

我正在做一个 React 项目，其中将从服务器检索书籍列表。每本书都可以选择设置到不同的书架中，例如 1) 当前正在阅读、2) 想要阅读和 3) 基于阅读关于用户对这本书的体验。每本书都会有一个下拉菜单，其中将提到 3 个书架。一旦用户从下拉菜单中单击书架，该书将显示在所选书架上。所以，我可以检索API 中的书籍，但我被困在书籍被选中后将被设置到相应书架的位置。

从 API 中检索所有书籍的代码：

import React, { Component } from 'react';

class BooksList extends Component {

  state={
    showSearchPage: false,
    books: [],
    selectedValue: 'None'
  }

  handleChange =(e) => {
    this.setState({ selectedValue:e.target.value })
  }

  render() {
    return(
{<div className="book-search">
                  {this.props.books.map( book =>

                    <div className="book">
                      <div className="book-top">
                        <div className="book-cover" style={{ width: 128, height: 193,margin:10, backgroundImage: `url(${book.imageLinks.smallThumbnail})` }}></div>
                        <div className="book-shelf-changer">
                          <select
                            value={this.state.selectedValue}
                            onChange={this.handleChange}>
                            <option value="none" disabled>&nbsp; &nbsp; Move to...</option>
                            <option value="currentlyReading">&#x2714; Currently Reading</option>
                            <option value="wantToRead">&nbsp; &nbsp; Want to Read</option>
                            <option selected="selected" value="read">&nbsp; &nbsp; Read</option>
                            <option value="none">&nbsp; &nbsp; None</option>
                          </select>
                        </div>
                      </div>
                      <div className="book-title">{book.title}</div>
                      <div className="book-authors">{book.authors}</div>
                      <p>{this.state.selectedValue}</p>
                    </div>
              )}
              </div>
                }

当前阅读书架的代码：

<div className="list-books-content">
                <div>
                  <div className="bookshelf">
                    <h2 className="bookshelf-title">Currently Reading</h2>
                    <div className="bookshelf-books">
                      <ol className="books-grid">


                        { this.props.books.map(book =>
                          <li>
                            <div className="book">
                              <div className="book-top">
                                <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.smallThumbnail})` }}></div>
                                <div className="book-shelf-changer">
                                  <select
                                    value={this.state.selectedValue}
                                    onChange={this.handleChange}>
                                    <option value="none" disabled>&nbsp; &nbsp; Move to...</option>
                                    <option value="currentlyReading">&#x2714; Currently Reading</option>
                                    <option value="wantToRead">&nbsp; &nbsp; Want to Read</option>
                                    <option selected="selected" value="read">&nbsp; &nbsp; Read</option>
                                    <option value="none">&nbsp; &nbsp; None</option>
                                  </select>
                                  <p>{this.state.selectedValue}</p>
                                </div>
                              </div>
                              <div className="book-title">{this.state.currentlyReadingBooks}</div>
                              <div className="book-authors">{book.authors}</div>
                            </div>
                            </li>
                        )}

所以我想到的解决方案是：我们是否必须为三个不同的部分创建 3 个书籍数组并将书籍移动到每个部分。谁能帮我解决这个问题。我真的很坚持。我无法弄清楚如何继续。

【问题讨论】：

API 调用在哪里？ this.props.books的内容是什么？
一种选择是拥有 3 组书籍。在选择时，您将书放在相应的数组中。在渲染中，您分别渲染三个数组（甚至更好：渲染 3 个组件并将它们传递给各自的数组）。另一种选择是拥有书籍对象数组，并为它所属的每个书籍对象添加一个属性。然后在渲染中，您可以按此属性进行过滤。

标签： javascript reactjs

【解决方案1】：

一旦用户点击下拉菜单中的书架，该书将显示在所选书架上

这告诉我你可能不需要将selectedValue 存储在反应状态；选择下拉动作动作后，只需“添加”它即可。

所以，是的，我认为您的描述是有道理的 - 将三个单独的书籍数组存储在反应状态，然后在您的 handleChange 函数中，将书籍附加到适当的数组中。

（旁注：反应的最佳实践是从您的状态中复制唯一的数组，而不是直接附加/改变它。）

【讨论】：

如何在handleChange函数中将选中的书追加到新状态？