Как получить значение из this.state в другом компоненте React?

Question

[Unknown]

Привет!
У меня есть форма в ней есть компонент, в этом компоненте при определенных условиях происходит setState в образующийся массив. Сейчас запилю кнопку Submit и хочу забрать этот массив чтобы отправить на сервер.
Как я могу забрать этот state?

PS конечно я могу поместить получаемую информацию в value для моего компонента и потом забрать value - это просто, но что если там будет очень много информации или вообще объект, тогда это не совсем правильный вариант

Answer 1

[Максим]

Если submit находится в этом же компоненте - просто забираем значения из state.

Если в другом (на уровень выше, получается, или на несколько), то значит вам нужно из компонента, при изменении вызывать callback функцию (которая будет передана в качестве props), внутри которой будет вызываться изменение уже родительского стейта и тогда на submit вы запросто сможете забирать уже готовый state

Пример кода:

Component A

state = {
  fromSuperComponent: '123',
}

callMeHandle = (e) => {
  this.setState({
    fromSuperComponent: e.currentTarget.value,
  })
}

render() {
  return (
    <form>
      <input type='text' value='test'/>
      <SuperComponent callMeWhenDataChanged={this.callMeHandle} value={this.state.fromSuperComponent} />
    </form>
  )
}

SuperComponent

render() {
  <input type='text' value={this.props.value} onChange={this.props.callMeWhenDataChanged} />
}

Comments

[Finch_85]

поток данных идет сверху вниз, события - снизу вверх. Или можно использовать Redux. Или Контекст.Провайдер