При импорте пользовательского компонента панели инструментов не запускаются методы в Reaction-Big-Calendar - PullRequest
Новая
       14

При импорте пользовательского компонента панели инструментов не запускаются методы в Reaction-Big-Calendar

0 голосов
/ 08 февраля 2019

Когда я создаю пользовательскую панель инструментов в том же файле, что и Calendar, я могу полностью использовать метод onView('day').Это меняет взгляды.Однако, когда я помещаю тот же CalendarToolbar в другой файл и импортирую его в файл календаря, он не обновляет и не меняет представление.Я получаю методы в качестве подпорки, но это ничего не меняет. 

// CustomToolbar
const CalendarToolbar = ({ onView, label, views }) => (
  <div>
    <h2>
      {label}
    </h2>
    {views.map(view => (
      <button
        key={view}
        type="button"
        onClick={() => onView(view)}
      >
        {view}
      </button>
    ))}
  </div>
);

<Calendar
  localizer={localizer}
  defaultDate={new Date()}
  defaultView="day"
  events={mockEvents}
  style={{ height: '100vh' }}
  onSelectEvent={this.handleSelectEvent}
  components={{
    toolbar: CalendarToolbar,
  }}
/>

Просто интересно, что я делаю не так?

1 Ответ

0 голосов
/ 26 февраля 2019

Я недавно написал свой собственный компонент панели инструментов.Я скопировал исходную панель инструментов из репозитория, а затем заменил метод render() своим собственным, копируя то, что они сделали, и включая мои собственные материалы.Мои вещи реализации не совсем важны, но если вы посмотрите на onClick биты ниже, это может помочь вам сделать то, что вы хотите сделать: 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import ToolbarDateHeader from './ToolbarDateHeader.component';
import { Icon, Button, ButtonGroup, ButtonToolbar } from '../app';

const navigate = {
  PREVIOUS: 'PREV',
  NEXT: 'NEXT',
  TODAY: 'TODAY',
  DATE: 'DATE'
};

const propTypes = {
  view: PropTypes.string.isRequired,
  views: PropTypes.arrayOf(PropTypes.string).isRequired,
  label: PropTypes.node.isRequired,
  localizer: PropTypes.object,
  onNavigate: PropTypes.func.isRequired,
  onView: PropTypes.func.isRequired
};

export default class Toolbar extends Component {
  static propTypes = propTypes;
  render() {
    let {
      localizer: { messages },
      label,
      date
    } = this.props;

    return (
      <ButtonToolbar>
        <ButtonGroup>
          <Button onClick={this.navigate.bind(null, navigate.TODAY)}>
            {messages.today}
          </Button>
          <Button onClick={this.navigate.bind(null, navigate.PREVIOUS)}>
            <Icon glyph="caret-left" />
          </Button>
          <Button onClick={this.navigate.bind(null, navigate.NEXT)}>
            <Icon glyph="caret-right" />
          </Button>
        </ButtonGroup>

        <ToolbarDateHeader date={date} onChange={this.toThisDay}>
          {label}
        </ToolbarDateHeader>

        <ButtonGroup className="pull-right">
          {this.viewNamesGroup(messages)}
        </ButtonGroup>
      </ButtonToolbar>
    );
  }

  toThisDay = date => {
    this.props.onView('day');
    // give it just a tick to 'set' the view, prior to navigating to the proper date
    setTimeout(() => {
      this.props.onNavigate(navigate.DATE, date);
    }, 100);
  };

  navigate = action => {
    this.props.onNavigate(action);
  };

  view = view => {
    this.props.onView(view);
  };

  viewNamesGroup(messages) {
    let viewNames = this.props.views;
    const view = this.props.view;

    if (viewNames.length > 1) {
      return viewNames.map(name => (
        <Button
          key={name}
          className={cn({
            active: view === name,
            'btn-primary': view === name
          })}
          onClick={this.view.bind(null, name)}
        >
          {messages[name]}
        </Button>
      ));
    }
  }
}
...