Передать обновленное значение родительскому элементу в React

avatar
Martin Nordström
8 апреля 2018 в 03:20
38
1
0

Здравствуйте, люди из 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. Или я должен попытаться решить эту проблему каким-то другим способом.

Источник

Ответы (1)

avatar
Rahul Gandhi
8 апреля 2018 в 03:53
1

Сохранение состояния в NewArticle и передача реквизита HoveringMenu — хорошая идея, но обновление его в дочернем элементе — нет.

Вы должны вызвать setState родительского компонента (NewArticle) из "набора функций" в дочернем компоненте (HoveringMenu).

В принципе, если у вас есть состояние в родительском элементе и вы передаете его в качестве реквизита дочернему элементу, убедитесь, что вы изменяете состояние только в родительском элементе. В противном случае вам придется синхронизировать состояние родительского и дочернего элементов. (Кроме того, вы можете использовать методы жизненных циклов компонентов в дочернем компоненте, чтобы узнать, изменились реквизиты или нет, как componentWillReceiveProps)

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

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

и ваша функция updateValue будет выполнять

updateValue: function(values) {
    this.setState({
        values: values
    })
};
Martin Nordström
8 апреля 2018 в 16:00
0

Спасибо за ответ! Я понял это, поскольку у меня должна быть функция updateValue в моем компоненте NewArticle и передавать ее состояние HoveringMenu. Но я не уверен, что делать с updateValue, который я передаю. Ничего, если я отправлю два файла, чтобы вы могли взглянуть на них? Спасибо!

Rahul Gandhi
9 апреля 2018 в 16:48
0

Да, конечно. Вы должны вызвать свойство updateValue из дочернего компонента.