在 React 中单击按钮时显示元素

Question

我是 React 新手，我必须显示一些从数据库加载的书籍的数据，就像我在 render() 中所做的那样。当我单击“所有书籍”按钮时，我想这样做。我应该在 getAllBooks 函数中写什么而不是在 render() 中写代码？我真的找不到正确的方法。谢谢！ ,

import React, {Component} from 'react'
import BookStore from './BookStore'
import {EventEmitter} from 'fbemitter'

const emitter= new EventEmitter()
const store= new BookStore(emitter)

class BookList extends Component{
    constructor(props){
        super(props)
        this.state= {
            books: []
        }
    }
    componentDidMount(){
        store.getAll()
        emitter.addListener('BOOK LOAD', ()=>{
            this.setState({books: store.content})
        })

        this.getAllBooks = this.getAllBooks.bind(this);
    }

    getAllBooks(){

    }

    render(){
        return (
            <div>
            <div>
            <h3>The Books:</h3>
            <br></br>
            <div>
            {
            this.state.books.map((b)=>
            <div>{b.title +' by '+ b.author}</div>
            )
            }
            </div>
            </div>
            <input type="button" value="All Books" onClick={this.getAllBooks}/>

            </div>
        )
    }
}

export default BookList

Answer 1

您可以将渲染函数中的代码移动到getAllBooks，但您也应该将绑定移动到constructor。