Как отправить состояние даты календаря в другой календарь с помощью Reactjs?

У меня есть два календаря, например «Повестка дня», есть кнопка со значком календаря, когда я нажимаю на нее, она будет перенаправлена ​​на другой календарь (Planning), эти календари разработаны с помощью react-big-calendar, я хочу, чтобы когда я, например, нахожусь на juin 17 - 23 неделе повестки дня и нажимаю на значок календаря, он будет перенаправлен к juin 17 - 23 Планирования.

Мой код: https://codesandbox.io/s/m7k904y3o8

Я пытаюсь отправить дату с помощью getWeek(), но это не работает.

Как я могу это исправить?


reactjs javascript state react-props react-big-calendar
person CodeLover    schedule 06.05.2019    source источник
comment
вероятно, нужно состояние, либо сохранить состояние в приложении или индексном файле и передать его каждому календарю (с методом его изменения), либо реализовать библиотеку управления состоянием, такую ​​как redux, для обработки передачи данных   -  person Joe Lloyd    schedule 06.05.2019
comment
@Joe, я не использую redux, вы можете привести мне пример или вы можете использовать то, что вы говорите, в моей песочнице?   -  person CodeLover    schedule 06.05.2019
comment
добавил базовый пример, надеюсь, это поможет.   -  person Joe Lloyd    schedule 06.05.2019

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете добавить в this.props.history.push дополнительные данные, которые затем будут доступны в опоре location вашего Planning компонента. Например, если вы хотите просмотреть неделю 20 декабря 1995 года:

// Agenda.js: Routing to "/planning"

this.props.history.push("/planning", { date: new Date(1994, 11, 19, 0, 0)})

// Planning.js

constructor(props) {
    super(props); //Important

    this.state({
        /* ... */
        dateWeek: this.props.location.state && this.props.location.state.date
    });
}

// Following is a fix or else you would not get next/previous week.

getThisWeek = (dateWeek) => {
    this.setState({ dateWeek });
}

Я бы порекомендовал еще два решения: параметры URL и Параметры запроса.

person Rallen    schedule 07.05.2019
comment
Спасибо @Rallen, работает хорошо. У вас есть идеи по этому поводу, пожалуйста? stackoverflow.com/questions/56021617/ - person CodeLover; 07.05.2019

arrow_upward
2
arrow_downward

Вы должны использовать некоторую библиотеку управления состоянием

Мой первый совет - использовать Redux, поскольку библиотека очень хорошо справляется с подобными ситуациями. Вы хотите передать некоторые данные между несвязанными компонентами. Наличие государственного объекта здесь сослужит вам хорошую службу.

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

Пример вашего компонента приложения как контейнера

import React, { Component } from "react";
import autobind from 'autobind-decorator';
import { Route, Link, Switch, Redirect } from "react-router-dom";
import Agenda from "./Agenda";
import Planning from "./Planning";
class App extends Component {
  state = {selectedDate: Date.now()}

  @autobind
  setActiveDate (dateToSet) {
    this.setState({selectedDat: dateToSet});
  }
  /*---------------------------------------------------- Rendu -----------------------------------------------------------------*/
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" render={(props) => <Agenda {...props} setActiveDate={setActiveDate} selectedDate={this.state.selectedDate} />} />
          <Route exact path="/planning" render={(props) => <Planning {...props} selectedDate={this.state.selectedDate} />}/>
        </Switch>
      </div>
    );
  }
}

export default App;

Некоторые моменты, на которые следует обратить внимание

  • Во-первых, вы не хотите, чтобы ваш основной компонент приложения использовался в качестве контейнера таким образом, поэтому создайте другой компонент для обработки этого управления состоянием.
  • Декоратор autobind используется для упрощения написания, вы можете привязать свою функцию в конструкторе, если хотите, вместо этого
  • Этот компонент показывает только половину истории, другая половина находится в ваших дочерних компонентах, вам нужно будет прочитать дату отсюда, а также вызвать функцию setActiveDate из дочернего элемента (Повестка дня)

Заключение

Этот метод загрязнит ваши компоненты гораздо больше, чем реализация redux. Но это быстрее, чем полная настройка redux. Просто постарайтесь запомнить принцип единственной ответственности.

person Joe Lloyd    schedule 06.05.2019