保存状态中的Div内容答案

【问题标题】：Save contents of Div in the state保存状态中的Div内容
【发布时间】：2020-10-07 01:46:02
【问题描述】：

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

现在我想在模式中单击“确定”时将这个 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

【问题讨论】：

标签： javascript html jquery css reactjs

【解决方案1】：

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

 <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

【讨论】：

谢谢迪伦，但这并不是我想要的

【解决方案2】：

请查看https://codesandbox.io/s/competent-frog-m4dxf?file=/src/components/Menu.jsx。

所以基本上，由于它是一个餐厅应用程序，其目的是将菜单项、价格和数量保存到您的数据库中。所以这里可以做的是将模态中的当前项目与数量一起保持在您的状态中。
单击“确定”按钮时将其存储到名为 Orders 的状态变量中。

saveToOrders = () => {
    this.setState(prevState => {
      this.setState({
        orders: [
          ...prevState.orders,
          {
            MenuItem: prevState.modalText.menuItem,
            price: prevState.modalText.price,
            quantity: prevState.modalText.quantity
          }
        ]
      });
    });
  };

状态表示为

state = {
    addModalShow: false,
    copied: false,
    modalText: {
      menuItem: "",
      price: "",
      quantity: 0
    },
    orders: []
  };

【讨论】：