使用onClick時的反應渲染

Question

想知道是否有方法可以渲染沒有構造函數的組件。

以下是我的onClick代碼。我的目標是在單擊按鈕時呈現，以便按鈕消失。 我不知道是否有辦法使這個不創建

constructor(props) { 
     super(props); 
     this.state = {} 
} 






<div> 
    <h1>Title: {post.title}</h1> 
    <h2>Pages: {post.pages}</h2> 
    <div>Reviews:</div> 
    <button 
     onClick={() => { this.props.addToMyPage(
       { 
        userId: user.user.user_id, 
        bookId: post.book_id 
       } 
     )}}> 
     Add this to my page 
    </button> 
</div> 
) 

d

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { selectBook } from '../actions/index'; 
import { addToMyPage } from '../actions/index'; 
import { Link } from 'react-router'; 
import { selectUser } from '../actions/index.js'; 
import { getBooks } from '../actions/index'; 
import _ from 'lodash'; 

class BookDetails extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      show: true 
     }; 
    }  
    componentWillMount() { 
     this.props.selectBook(this.props.params.id) 
     if(this.props.user) { 
      this.props.selectUser(this.props.user.user.user_id); 
     } 
     else { 
      this.props.selectBook(this.props.params.id); 
     } 
    } 

    renderList() { 

     const elems = []; 
     const urlId = parseInt(this.props.params.id); 
     this.props.list.forEach((list) => { 
      console.log("list", list.book_id); 
      console.log("params", this.props.params.id) 
       if(list.book_id === urlId) { 
        console.log("true"); 
        elems.push({ 
         book: list.book_id 
        }) 
       } 
     }) 
     return elems; 
    } 
    render() { 
     const {post} = this.props; 
     const {user} = this.props; 
     const {list} = this.props; 
     const renderList = this.renderList(); 
     const urlId = parseInt(this.props.params.id); 

     if(!post) { 
      return <div>Loading...</div> 
     } 

     if(user && list) { 
      if(urlId === _.get(renderList, '[0].book')) { 
       return (
        <div> 
         <h1>Title: {post.title}</h1> 
         <h2>Pages: {post.pages}</h2> 
         <div>Reviews:</div> 
        </div> 
       ) 
      } 
      else { 
       return (
        <div> 
         <h1>Title: {post.title}</h1> 
         <h2>Pages: {post.pages}</h2> 
         <div>Reviews:</div> 
         {this.state.show && <button 
          onClick={() => { this.setState({show:false}, this.props.addToMyPage(
           { 
            userId: user.user.user_id, 
            bookId: post.book_id 
           } 
           ))}}> 
          Add this to my page 
         </button> 
        </div> 
       ) 
      } 
     } 
     else { 
      return (
       <div> 
        <h1>Title: {post.title}</h1> 
        <h2>Pages: {post.pages}</h2> 
        <div>Reviews:</div> 
       </div> 
      ) 
     } 
    } 
} 

function mapStateToProps(state) { 
    return { 
     post: state.books.post, 
     user: state.user.post, 
     list: state.list.all 

    } 
} 
export default connect(mapStateToProps, {selectBook, addToMyPage, getBooks, selectUser})(BookDetails); 

Answer 1

您可以輕鬆地顯示該按鈕根據您的功能的狀態：

this.state = { 
    show: true 
}; 

====

<div> 
.... 
{this.state.show && <button 
    onClick={() => { this.props.addToMyPage(
      { 
       userId: user.user.user_id, 
       bookId: post.book_id 
      } 
    ); this.setState({show:false})}}> 
    Add this to my page 
</button> 
} 
... 
</div> 

點擊按鈕後 - 將狀態更改爲show: false，這將導致按鈕從DOM中刪除。