Как отправить состояние даты календаря в другой календарь с Reactjs? - PullRequest
Новая
       51

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

1 голос
/ 06 мая 2019

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

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

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

Как это исправить?

Ответы [ 2 ]

2 голосов
/ 07 мая 2019

Вы можете добавить дополнительные данные к 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 и параметры запроса .

2 голосов
/ 06 мая 2019

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

Мой первый совет - использовать 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 из дочернего элемента (Повестка дня)

Заключение

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

...