借助 React 中的模态输入更新项目数组

Question

我没有找到适合这个问题的答案。这是我要找的。

我有来自状态数组变量 (https://i.imgur.com/FzD0sol.png) 的菜单项列表。
我有一个打开模式的添加按钮。模态包括一个输入字段。 (https://i.imgur.com/6DCZhoj.png)
最终结果是当点击添加模态按钮时，其字段值在菜单状态数组中更新。进一步更新 UI.

这些我都能做到UI。但我不知道如何将我的数据从模式输入传递到菜单列表。这是相同问题（https://kx6yr.csb.app/）的codesandebox link。

Answer 1

所以这是一种方法，在你的模式中添加这个 onAdd 属性：

 <AddModal
  heading="Add Food"
  modalId="addFood"
  inputName="addFood"
  onAdd={(textEntered) => { alert(textEntered); }}
  ref={this.foodModal}
/>
<AddModal
  heading="Add Drink"
  modalId="addDrink"
  inputName="addDrink"
  onAdd={(textEntered) => { alert(textEntered); }}
  ref={this.drinkModal}
/>

并在模态组件中调用传递输入值的处理程序：

    <button
      type="button"
      onClick={this.props.onAdd.bind(this, this.state.item)}
      className="golden-button-op"
      style={{ margin: "0px" }}
    >
      Add
    </button>

希望对您有所帮助！

Answer 2

有一种方法可以解决您的问题：你必须给你的模态组件一个回调道具。这样，模态框就可以添加item了。

有codesandBox : https://codesandbox.io/s/friendly-boyd-ptxem

借助 React 中的模态输入更新项目数组

Update array of items with help of modal input in React

typescript

reactjs

react-lifecycle