Как передать данные снизу вверх с помощью Context API React?

Question

[Unknown]

Привет!
Пробую внедрить Context Api в мой проект. И сейчас я пытаюсь понять: возможно ли передать данные снизу вверх, т.е. из дочерних компонентов к родителю или из Consumers в Provider?

Пример:

React.createContext

export const eventData = {
  topic: "defaultTopic",
};

export const CreateEventFormContext = React.createContext(eventData);

Есть типичный input для ввода текста. valueFromProvider в Consumer пока никак не используется. Но я хочу передавать значение атрибута value, которое динамически меняется с помощью handleChange в Provider. Ну а затем из Provider я планирую передавать данные в ControlForm.jsx и оттуда буду отправлять массив данных в базу.
CreateEventFormConsumer

...
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
...
  <CreateEventFormContext.Consumer>
     {valueFromProvider => (
         <input type="text" value={this.state.value} onChange={this.handleChange} />
     )}
  </CreateEventFormContext.Consumer>

CreateEventFormProvider

<CreateEventFormContext.Provider value="HELLO WORLD">
            <Topic />
      </CreateEventFormContext.Provider>

Таким образом я передал строку HELLO WORLD в valueFromProvider в моем Consumer. Но как мне сделать тоже самое только наоборот? Когда начал вникать в Context Api думал что это избавит меня от колбеков, но пока кроме колбека не вижу другого варианта передать данные вверх.

Как передать данные снизу вверх с помощью Context API React ?

Comments

[planc]

https://alligator.io/react/context-api/

Answer 1

[Антон Спирин]

Context API используют для передачи контекста, а не для управления состоянием. Почитайте о Redux.

Comments

[Unknown]

хмм, думаю вы правы, пойду поучу Redux. Спасибо :)

Answer 2

[DarthJS]

Centext Api немного для других целей. Просто закиньте метод внутрь:

и уже в родительском компоненте, где вы его обьявили выловите value:
handleChange = (e) => e.target.value;