@Richswitch
junior

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

Привет!
Пробую внедрить 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 ?
  • Вопрос задан
  • 511 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Context API используют для передачи контекста, а не для управления состоянием. Почитайте о Redux.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
DarthJS
@DarthJS
Centext Api немного для других целей. Просто закиньте метод внутрь:

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы