Question

当我在与Calendar的同一文件中创建自定义工具栏时，可以完全使用onView('day')方法。它更改了视图。但是，当我将相同的CalendarToolbar放入另一个文件中并将其导入到Calendar文件中时，不会更新或更改视图。我把这些方法当作道具，但是它什么都没有改变。

// 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,
  }}
/>

只是想知道我在做什么错？

Answer 1

我最近编写了自己的自定义工具栏组件。我从存储库复制了原始工具栏，然后用自己的方法替换了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>
      ));
    }
  }
}

导入自定义工具栏组件不会触发react-big-calendar中的方法

1 个答案: