Question

我正在创建一个bookReads项目（如goodreads），您可以在其中保存书籍的轨迹。我有一张书桌，每本书都分配了一个书架。每行都有一个下拉列表，用于更改当前书籍的书架。

我的问题是，当我更换一本书的书架时，它会改变所有书籍的书架。我看了here，但这只谈了一个特定的值而不是一堆值。我不确定我在这里做错了什么。

class ListBooks extends Component {
  state = {
    query: '',
    currentShelf: 'move',
    expanded: false,
    truncated: false,
    shelfNames: ['currentlyReading', 'wantToRead', 'read'],
    lines: 4
  }

  updateShelf = (event) => {
    this.setState({currentShelf: event.target.value})
  }

  updateQuery(query){
    this.setState({query: query})
  }

  render(){

    let showingBooks
    if(this.state.query){
      const match = new RegExp(escapeRegExp(this.state.query), 'i')
            showingBooks = this.props.books.filter((book) => match.test(book.title))
    } else {
      showingBooks = this.props.books
    }

    const {
            children,
            more,
            less,
            lines
        } = this.props;

        const {
            expanded,
            truncated
        } = this.state;

    showingBooks.sort(sortBy('title'))
    return(
      <div className="list-books">
        <div className="list-books-title">
          <h1>BookReads</h1>
        </div>
        <input type="text"
          placeholder="Search by title or author"
          value={this.state.query}
          onChange={(event) => this.updateQuery(event.target.value)}
          className="search-field"
          />
        <div className="list-books-content">
          <div>
            <Table striped bordered hover>
              <thead>
                <tr>
                  <th className="book-header">Book</th>
                  <th className="book-header">Author</th>
                  <th className="book-header"> Shelf </th>
                  <th></th>
                </tr>
              </thead>
              <tbody>{showingBooks.map((book)=>(
                  <tr key={book.id}>
                    <td className="bookShelfTable">
                      <div className="style">
                        <div className="book-cover" style={{ width: 128, height: 193, float: "left", marginRight: 10,
                          backgroundImage: "url(" + book.imageLinks.thumbnail + ")" }} />
                        <h4> {book.title} </h4>
                        <h6> {book.subtitle}</h6>
                      </div> <br />
                      <div>
                        {book.description}
                      </div>
                    </td>
                    <td>
                      <div> {book.authors} </div>
                    </td>
                    <td> {this.state.currentShelf}</td>
                    <td>
                      <div className="book-shelf-changer">
                        <select  value={this.state.currentShelf} onChange={this.updateShelf}>
                            <option value="move">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>

                         <i className="fa fa-times" onClick={() => this.props.onDeleteBook(book)}/>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </Table>
          </div>
        </div>
      </div>
    )
  }
}

Answer 1

而不是：

updateShelf = (event) => {
  this.setState({currentShelf: event.target.value})
}

尝试使用常规ES6方法语法：

updateShelf(event){
this.setState({currentShelf: event.target.value})

编辑：在这种情况下，您肯定需要为每本书都有一个单独的组件/状态。可以在单个书籍基础上改变的值应该作为道具传递给书籍组件，并且在组件构造器中使用这些道具的初始值来设置每个书籍组件的初始状态值。下拉列表更改时，书籍组件上的方法称为仅更新该书籍的状态。

如果你需要书籍组件中的一个更新所有书籍的功能，那么该方法应该在书架对象中创建，并且对这个书架方法的引用也应该传递给每本书的道具。

Answer 2

您所在州只有一个currentShelf，但您的所有图书都会分享。每本书都需要currentShelf个州。最简单的方法是使每本书成为有状态的Book组件，使用类似的updateShelf方法。

因此showingBooks.map回调中的所有内容都是Book组件的渲染方法。

onChange更改所有值而不是特定值

2 个答案: