Redux-React Bootstrap Pliable question

Question

J'ai donc essentiellement terminé l'un des RecipeBox Project de FCC

La seule chose que je ne parviens pas à est de garder une trace de l'état de l'effondrement du panneau. En d'autres termes, chaque fois que je change l'état de l'application (qu'il s'agisse d'ajouter, de supprimer ou d'éditer une recette), la page et chaque panneau sont de nouveau décompressés.

J'ai regardé le React-Bootstrap Document mais je n'arrive pas à le comprendre.

Mon code actuel ne fonctionne pas lors de l'application d'un état pour chaque élément de recette

src/conteneurs/boîte de recettes

class RecipeBox extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {open: false} 
    this.renderRecipeList = this.renderRecipeList.bind(this) 
    this.handleRecipeNameChange = this.handleRecipeNameChange.bind(this) 
    this.handleUserIngredientsChange = this.handleUserIngredientsChange.bind(this) 
    } 

    handleRecipeNameChange(event){ 
    this.setState({recipeName: event.target.value}) 
    } 
    handleUserIngredientsChange(event){ 
    this.setState({userIngredients: event.target.value}) 
    } 
    renderRecipeList(recipeItem, index){ 
    const recipe = recipeItem.recipe; 
    const ingredients = recipeItem.ingredients; 
    const recipeID = recipeItem.id; 
    const id = shortid.generate(); 
    return(
     <div key={id}> 
     <Panel 
      collapsible 
      onClick={()=> this.setState({ open: !this.state.open })} 
      eventKey={index} 
      header={<h3>{recipe}</h3>}> 
      <ListGroup > 
      <ListGroupItem header="Ingredients"></ListGroupItem> 
      {ingredients.map(function(ingredient,index){ 
       return <ListGroupItem key={index}>{ingredient}</ListGroupItem>; 
      })} 
      <ListGroupItem> 
       <Button 
       onClick={() => this.props.deleteRecipe(recipeItem)} 
       bsStyle="danger">Delete 
       </Button> 
       <Edit 
       recipeName={recipe} 
       userIngredients={ingredients} 
       recipeID={recipeID} 
       /> 
      </ListGroupItem> 
      </ListGroup> 
     </Panel> 
     </div> 
    ) 
    } 
    render(){ 
    const self = this; 
    return(
     <div className="container"> 
     <div className='panel-group'> 
      {this.props.recipeList.map(self.renderRecipeList)} 
     </div> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    recipeList : state.recipeState 
    }; 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({deleteRecipe : deleteRecipe, editRecipe : editRecipe}, dispatch) 
} 

export default connect(mapStateToProps,mapDispatchToProps)(RecipeBox); 

Answer 1

donc j'ai pu comprendre ce qui se passait: je avais besoin pour chaque recette doit avoir son propre état de composant.

J'ai créé un composant séparé, RecipeList qui restitue chacun des éléments de recette, ainsi que son propre composant d'état.

I modifié comme si:

src/récipients/boîte de recettes

import React, { Component } from 'react'; 
    import { connect } from 'react-redux'; 
    import { ListGroup, ListGroupItem, Panel, Button, Modals } from 'react-bootstrap'; 
    import RecipeList from '../containers/recipe_list' 

    class RecipeBox extends Component { 
     constructor(props){ 
     super(props); 
     } 
     render(){ 
     let itemList = []; 
     this.props.recipeList.forEach(function(item){ 
      itemList.push(
      <RecipeList 
       key={item.id} 
       recipeID={item.id} 
       recipe={item.recipe} 
       ingredients={item.ingredients} 
      />) 
     }) 
     return(
      <div className="container"> 
      <div className='panel-group'> 
       {itemList} 
      </div> 
      </div> 
     ) 
     } 
    } 

    function mapStateToProps(state) { 
     return { 
     recipeList : state.recipeState 
     }; 
    } 

    export default connect(mapStateToProps)(RecipeBox); 

src/conteneurs/recipe_list

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { ListGroup, ListGroupItem, Panel, Button, Modals } from 'react-bootstrap'; 
import { bindActionCreators } from 'redux'; 
import { deleteRecipe, editRecipe } from '../actions/index'; 
import shortid from 'shortid' 
import Edit from '../containers/edit_recipe' 

class RecipeList extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {open: false} 
    } 
    handleRecipeNameChange(event){ 
    this.setState({recipeName: event.target.value}) 
    } 
    handleUserIngredientsChange(event){ 
    this.setState({userIngredients: event.target.value}) 
    } 
    render(){ 
    return(
     <div> 
     <Panel 
      collapsible 
      header={<h3>{this.props.recipe}</h3>}> 
      <ListGroup > 
      <ListGroupItem header="Ingredients"></ListGroupItem> 
      {this.props.ingredients.map(function(ingredient,index){ 
       return <ListGroupItem key={index}>{ingredient}</ListGroupItem>; 
      })} 
      <ListGroupItem> 
       <Button 
       onClick={() => this.props.deleteRecipe(this.props.recipeID)} 
       bsStyle="danger">Delete 
       </Button> 
       <Edit 
       recipeName={this.props.recipe} 
       userIngredients={this.props.ingredients} 
       recipeID={this.props.recipeID} 
       /> 
      </ListGroupItem> 
      </ListGroup> 
     </Panel> 
     </div> 
    ) 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({deleteRecipe, editRecipe}, dispatch) 
} 

export default connect(null,mapDispatchToProps)(RecipeList);