ReactJS - 状態が更新されていないか、または効果がありませんか？

Question

私はいわゆるレシピボックスを作成しています。ここでadd/edit/deleteのレシピができるはずです。最初のレンダリング部分は正常に動作しているようですが、変更された内容に応じて状態やHTMLを更新する際には苦労しています。

現在、レシピを編集するときに状態変更トリガを実装しました。いろいろな記事を読んで、別の要素が相互作用しているときに別の要素から値を読み取ろうと思ったら（私の場合はbutton要素をクリックするとinput要素から）、入力を直接追跡するために状態を追加する必要があるその状態を使用して私が望むものをトリガーします（私の場合は、いわゆる保留状態の値を使用し、そのボタンが押されたときに通常の状態に設定されます）。

しかし、動作していないようです。私はおそらく何か間違っているのですが。ここで

が、私はの話、私は状態を実装する部分である：

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, 
} 

完全なコードでは、私が何を意味するのか理解するのが難しかった場合は、それが現在取り組んでいるかをテストすることができます（ここで見つけることができます。 、任意のレシピを開こうとし、それを編集し、押しボタンEdit Recipeと何も起こりません、レシピのタイトル）は変更されません。https://codepen.io/andriusl/pen/LjxYQo

Answer 1

は、あなたが直接this.pendingTitle代わりのthis.state.pendingTitleにアクセスしました。そう

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

にこれを変更し、状態について

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