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}