Обновление состояния из дочернего компонента reactjs

Простой ответ на ваш вопрос: Нет. Но почему?

То, что вы спрашиваете, очень похоже на концепцию двусторонней привязки, которая поддерживается в таких фреймворках, как Angular и Vue.js. Это означает, что данные будут передаваться от дочернего компонента к родительскому с одной привязкой. React не поддерживает это и настоятельно не рекомендует использовать такой подход. Он всегда предпочитает однонаправленный поток данных.

Таким образом, с React вы можете легко отправлять свои данные сверху вниз по дереву компонентов, используя props. Но если вы хотите обратное перенаправление снизу вверх, единственный вариант, который у вас есть, - это обратные вызовы. Вы можете передать обратный вызов как опору своему дочернему компоненту, и он вызовет обратный вызов с соответствующими данными, когда данные будут готовы. Иногда это сложно, когда нам нужна связь между глубоко вложенными компонентами. Вот где вам нужно использовать библиотеку управления состоянием, такую ​​как Redux или React context. который не рекомендуется использовать, если вы не опытный разработчик.

Чтобы лучше понять это, я предлагаю вам прочитать Thinking in React раздел из официальных документов React. Они считают, что такой подход упрощает понимание того, как работает программа, чем волшебное двустороннее связывание.

React делает этот поток данных явным, чтобы упростить понимание того, как работает ваша программа, но для этого требуется немного больше ввода, чем при традиционной двусторонней привязке данных.

Также,

Хотя это звучит сложно, на самом деле это всего лишь несколько строк кода. И действительно ясно, как ваши данные распределяются по всему приложению.

В вашем случае, вероятно, вам придется смириться с этим, выполнить рефакторинг в другой формат, предложенный другими ответами, или использовать стороннюю библиотеку, например response-binding (я не использовал его, поэтому не могу рекомендовать).

Состояние - это то, что характерно для области действия компонента, и поэтому вы не можете просто получить доступ и изменить состояние одного компонента из другого, напрямую обращаясь к нему. Вы должны вызвать метод конкретного компонента, состояние которого вы хотите изменить.

Итак, первый метод, который вы использовали, - это правильный способ сделать это.

Возможно, чтобы сделать его более чистым, вы можете поместить логику в отдельную функцию и передать эту функцию как опору.

Родитель

updateTarget = (newValue) => {

    this.setState( {
      warehouseId: newValue // updating the state from child comp. value
    }, () => {
      console.log( 'yokygoky', this.state.warehouseId )
    } )
}
<SelectWarehouse
  updateTarget={ ( ghostValue ) => this.updateTarget(ghostValue) }
/>

Неправильно обновлять состояние родительского компонента непосредственно из дочернего. Первая версия <SelectWarehouse /> с updateTarget как func правильная.

Кроме того, нет необходимости сохранять WarehouseId в состоянии дочернего компонента. Складской идентификатор может быть передан дочернему компоненту в качестве реквизита.

<SelectWarehouse
  updateTarget={( ghostValue ) => {
    this.setState( {
      warehouseId: ghostValue
    })
  }}
  warehouseId={this.state.warehouseId}
/>

Я думаю, что невозможно установить параметры сброса из самого компонента, подробнее см. ссылка.

Вы должны вызвать метод родительского элемента, а затем установить состояние и передать его дочернему элементу.

Родитель

updateTarget = (value) => {

   this.setState( {
     warehouseId: value 
   })
}
<SelectWarehouse
 updateTarget= {this.updateTarget }
/>

Ребенок

handleChangeWarehouse( e ) {
  this.setState( {
    selectedWarehouse: e.target.value
  }, () => {
    this.props.updateTarget( e.target.value )       
  })
}