ReactJS - Status nicht aktualisiert oder hat keinen Effekt?

Question

Ich erstelle so genannte Rezept-Box, wo Sie add/edit/delete Rezepte erstellen können. Der erste Rendering-Teil scheint gut zu funktionieren, aber ich kämpfe, wenn es um Status und Aktualisierung von HTML geht, je nachdem, was geändert wurde: ob das bestehende Rezept geändert, gelöscht oder neu hinzugefügt wurde.

Derzeit habe ich den Statuswechsel-Trigger implementiert, wenn das Rezept bearbeitet wird. Durch das Lesen verschiedener Artikel kam ich zum Schluss, dass wenn ich Werte von einem anderen Element lesen möchte, wenn ein anderes Element interagiert (in meinem Fall von input Element, wenn button Element angeklickt wird), muss ich den Status hinzufügen, um die Eingabe direkt zu verfolgen eingegeben und dann diesen Zustand verwenden, um auszulösen, was ich will (in meinem Fall verwende ich nur Wert aus so genanntem ausstehendem Zustand und setze auf normalen Zustand, wenn diese Taste gedrückt wird).

Aber es scheint, dass es nicht funktioniert. Obwohl ich wahrscheinlich etwas falsch mache.

Hier ist der Teil I-Staaten implementiert ich darüber gesprochen:

class RecipeComponent extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      title: '', 
      pendingTitle: '', 
      ingredients: '', 
      pendingIngredients: '', 
     } 
    } 
    handleChange(e, key){ 
     let obj = {}; 
     obj[key] = e.target.value; 
     this.setState(obj); 
    } 
    handleClick(){ 
     this.setState(
      {title: this.pendingTitle, ingredients: this.pendingIngredients}); 
    } 
    _renderModal(target, ctx){ 
     return (
      <div className="modal fade" id={target} role="dialog"> 
       <div className="modal-dialog"> 
        <div className="modal-content"> 
         <div className="modal-header"> 
          <button type="button" className="close" data-dismiss="modal">&times;</button> 
          <h4 className="modal-title">{ctx.title}</h4> 
         </div> 
         <div className="modal-body"> 
          <div className="form-group"> 
           <label htmlFor="title" className="control-label"><span>Recipe</span></label> 
           <input type="text" id="title" className="form-control" placeholder="Recipe Name" defaultValue={ctx.recipeTitle ? ctx.recipeTitle : ''} 
            onKeyUp={(e) => this.handleChange(e, 'pendingTitle')} 
           /> 
          </div> 
          <div className="form-group"> 
           <label htmlFor="ingredients" className="control-label"><span>Ingredients</span></label> 
           <input type="text" id="ingredients" className="form-control" placeholder="Enter Ingredients, separated by commas" defaultValue={ctx.ingredients ? ctx.ingredients : ''} 
            onChange={(e) => this.handleChange(e, 'pendingIngredients')} 
           /> 
          </div> 
         </div> 
         <div className="modal-footer"> 
{/*Seems to not update state properly*/} 
          <button type="button" className="btn btn-primary" onClick={() => this.handleClick()} data-dismiss="modal">{ctx.title}</button> 
          <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
... 
... 
{/*Here title from state is never set*/} 
    // Should this.state.title replace default title? 
    recipeTitle: this.state.title || recipe.title, 
} 

Voll Code finden Sie hier (Sie können auch testen, wie es zur Zeit arbeitet, wenn es schwer zu verstehen war, was ich meinte. versuchen Sie jedes Rezept zu öffnen, bearbeiten und drücken Sie die Taste Edit Recipe und nichts wird passieren, wird Rezept Titel nicht geändert werden): https://codepen.io/andriusl/pen/LjxYQo

Answer 1

Sie Zugriff direkt this.pendingTitle statt this.state.pendingTitle. so dass diese

handleClick(){ 
     this.setState(
      {title: this.state.pendingTitle, ingredients: this.state.pendingIngredients}); 
    } 

zu

ändern und diesen Code ändern zu

<a data-toggle="collapse" data-target={anchor_target} 
          href={anchor_target} className="collapsed">{this.state.title||recipe.title}