Question

Stack Overflow的朋友们！

我有两个组件，NewArticle和HoveringMenu。

在NewArticle中我有一个JSON对象，如下所示：

const initialValue = Value.fromJSON({
  document: {
    nodes: [
      {
        object: 'block',
        type: 'paragraph',
        nodes: [
          {
            object: 'text',
            leaves: [
              {
                text: 'Tell your story...'
              }
            ]
          }
        ]
      }
    ]
  }
})

我必须拥有它才能使用我使用的包。

在NewArticle状态下，我将initialValue作为我的内容，我稍后将其传递给我的HoveringMenu组件：

<HoveringMenu value={this.state.values.content} />

为了澄清，content等于initialValue。

在HoveringMenu组件内部，我有一些函数可以让我编辑文本并更改它的样式等。但是当我将新编辑的文本提交到我的服务器时，它不会得到更新，因为我的submit函数位于另一个组件NewArticle中。这只是内容：

content: JSON.stringify(this.state.values.content.toJSON())

来自它自己的状态，意味着initialValue变量中没有编辑过的文本（讲述你的故事......）。

所以我想知道如何将新的书面文本传递给NewArticle组件。或者，如果我应该尝试以其他方式解决这个问题。

Answer 1

将状态保持在NewArticle并将道具传递给HoveringMenu是一个好主意，但在孩子中更新它不是。

你应该从＆＃34;一堆函数＆＃34;中调用父组件（NewArticle）的setState。在子组件中（HoveringMenu）。

基本上，如果您在父级中拥有状态并将其作为道具传递给孩子，那么请确保仅更改父级中的状态。否则，您必须同步父级和子级中的状态。（另外，您可以在子组件中使用组件生命周期方法来了解道具是否发生了变化，如 componentWillReceiveProps ）

因此，您可以将函数传递给更新父状态的子函数，如下所示：

<HoveringMenu value={this.state.values} updateValue={this.updateValue}  />

并且您的updateValue函数将执行

updateValue: function(values) {
    this.setState({
        values: values
    })
};

在React中将更新的值传递给父级

1 个答案: