时间戳

首页 > 解决方案 > 保存状态中的Div内容

javascript - 保存状态中的Div内容

问题描述

我正在创建餐厅菜单。单击列表的每个菜单项时，我都会出现一个模式。此逻辑使用 innerHtml 并将列表内容粘贴到模式中。

现在我想在模式中单击“确定”时将这个 div 的内容单独保存在菜单组件的状态下。例如，在第一个项目列表模式中，我有 Egg Drop、$2 和数字输入。我喜欢在 Selected_Menu 对象的 MenuItem 和 Price 属性中保存 Egg Drop 和 $2。如果您能告诉如何将数字输入值保存到数量，它也会更有帮助。

 Selected_Menu:{

  MenuItem:null,
  Price:null,
  Quantity:null,
  TotalPrice:null
}

请查看沙箱： https ://codesandbox.io/s/cool-feynman-mcyfo

标签： javascripthtmljquerycssreactjs

解决方案

首先要做的是将一个函数传入模态以更新菜单的状态。

 <NumericInput 
     onChange={value => this.setState({ [item]: value })} 
     /* -- snip -- *//
 />

这将在值更改时更新每个项目的菜单状态中的计数。如果您希望仅在用户单击“确定”时应用此值，那么您将需要处理模式内部的状态，并且仅在单击“确定”时更新父（菜单）状态。看起来像这样：

 <NumericInput 
      onChange={value => this.setState({ count: value })} 
      /* -- snip -- *//
 />

 /* -- snip -- */
 <button onClick={() => this.props.setMenuItemCount(this.state.count)>
    Ok
 </button>

因此，要采用第二种方式，您需要为接收道具的模式创建一个新组件：setMenuItemCount。哪里setMenuItemCount看起来像这样：

setMenuItemCount={count => this.setState({ [item]: count })}

然后你把这个新组件放在这里：

<Modal.Body> 
    <YourComponent setMenuItemCount={count => this.setState({ [item]: count })}/>
</Modal.Body

推荐阅读