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}