Сохранить содержимое Div в состоянии

Question

Я создаю меню ресторана. У меня есть модальное окно, появляющееся при нажатии на каждый пункт меню списка. Этот logi c использует внутренний Html и вставляет содержимое списка в модальное окно.

Теперь я хочу сохранить содержимое этого div отдельно в состоянии компонента меню при нажатии кнопки «ОК» в модальном окне. Например, в модальном окне первого элемента у меня есть ввод Egg Drop, $ 2 и numeri c. Мне нравится сохранять Egg Drop в MenuItem и $ 2 в свойствах Price объекта Selected_Menu. Также будет более полезным, если вы скажете, как сохранить Numeri c Input value в Quantity.

 Selected_Menu:{

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

См. Песочницу: https://codesandbox.io/s/cool-feynman-mcyfo

Answer 1

Пожалуйста, проверьте 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: []
  };

Answer 2

Первое, что нужно сделать, это передать функцию в модальное окно для обновления состояния меню.

 <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