如何在另一个组件的主组件中使用方法

Question

我正在尝试将注释保存到localStorage (或者在本例中是localforage)中。我有一个简单的文本区域，有一个名为“保存”的按钮。保存按钮位于下面指示的另一个文件中。

我使用了一个找到这里的示例来尝试设置项目。

这就是我写的代码：

  SaveMessage() {
    var message = <Notepad></Notepad>;
    reactLocalforage
      .SetItem("Message", message, function(message) {
        console.log(message);
      })
      .catch(function(err) {
        console.log(err);
      });
  }

var消息我也不太确定。记事本是另一个包含文本区域和按钮的代码组件：

      <div className="button-container">
        <button
          className="save-button"
          onClick={() => {
            props.onSaveMessage(saveMessage);
          }}
        >
          Save
        </button>

        <button className="remove-button">Show all</button>
      </div>

它表示onClick的地方，我希望有一种使用SaveMessage方法的方法，最初我尝试将它创建为一个道具(来自一个教程)，所以在主要方法中，我将拥有：

  render() {
    return (
      <div>
        <Notepad onSaveMessage={this.SaveMessage}></Notepad>
      </div>
    );
  }

然后在记事本组件上：

      <button
        className="save-button"
        onClick={() => {
          props.onSaveMessage();
        }}
      >
        Save
      </button>

当我单击应用程序上的“保存”按钮时，我希望在浏览器上的本地存储中设置一些内容，但我得到了一个例外：

TypeError:不能将类作为函数调用

当我在上面的保存消息代码上设置项时，以及当我试图将它称为支柱onSaveMessage(saveMessage)时，就会发生错误。

Answer 1

您还没有添加足够的代码来修复您的确切问题，但是我可以帮助您理解应该如何继续修复它。在您想要在组件之间共享信息时，需要将数据lift到父组件中，然后通过道具来共享它。如果您的组件树很深，那么这个任务就会变得单调乏味。因此，已经开发了几个库来管理应用程序的状态。

我建议您从React页面中读取“提升国家”开始。为了帮助您将这些概念应用于当前的情况，我创建了一个CodeSandbox，在其中我尝试复制您的情况。你都能在这找到你的需要。

一旦您理解了“提升”状态的必要性，以及如何通过props共享数据和操作，就可以迁移到状态处理程序工具。其中一些是：

• React Context
• Redux
• MobX

还有更多。这不是一个广泛的清单，也不是最好的，只是那些我用过的，可以保证他们可以帮助你。

我希望这能帮到你。