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

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

• 我有来自state数组变量（）的菜单项列表
• 我有一个添加按钮，它打开一个模式。模态包含一个输入字段。（）
• 最终的结果是，当一些人单击添加模态按钮时，其字段值在菜单状态数组中更新。这将进一步更新UI上的菜单列表

---

我能够制作所有这些UI。但我不知道如何将数据从模式输入传递到菜单列表。下面是相同问题的CodeSandbox链接（）

所以这是一种方法，在你的情态动词中添加这个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}
/>

{alert（textcentered）；}
ref={this.foodModal}
/>
{警报（文本输入）；}
ref={this.drinkModal}
/>

在模态组件中，通过输入值调用此处理程序：

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

添加

---

希望有帮助

有一种方法可以解决您的问题： 您必须为模态组件提供回调道具。这样，模态将能够添加一个项

---

还有代码沙盒：

根据我对您的另一个问题的评论，有一个关于堆栈溢出的指导原则，这些问题应该主要是自包含的。你能编辑这个问题，将这个代码的代表性示例添加到问题本身吗？我会这样做的。谢谢你的建议