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

Question

当我在与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,
  }}
/>

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

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>
      ));
    }
  }
}

Answer 2

import React, { useState, useEffect } from "react";
import clsx from "clsx";
import moment from "moment";

function RBCToolbar(props) {
  const { label, date, view, views, onView, onNavigate } = props;
  const [month, setMonth] = useState("January");
  const mMonth = moment(date).format("MMMM");
  const months = moment.months();

  useEffect(() => {
    setMonth(mMonth);
  }, [mMonth]);

  const onChange = (event) => {
    const current = event.target.value;
    onNavigate("DATE", moment().month(current).toDate());
    setMonth(current);
  };

  const goToView = (view) => {
    onView(view);
  };

  const goToBack = () => {
    onNavigate("PREV");
  };
  const goToNext = () => {
    onNavigate("NEXT");
  };

  const goToToday = () => {
    onNavigate("TODAY");
  };

  return (
    <div className="rbc-toolbar">
      <div className="rbc-btn-group">
        <button onClick={goToToday}>Today</button>
        <button onClick={goToBack}>Back</button>
        <button onClick={goToNext}>Next</button>
      </div>
      <div className="rbc-toolbar-label">
        {view === "month" ? (
          <>
            <select className="rbc-dropdown" value={month} onChange={onChange}>
              {months?.map((month) => (
                <option
                  value={month}
                  className="rbc-dropdown-option" //custom class
                  key={month}
                >
                  {month}
                </option>
              ))}
            </select>
            <span className="rbc-year"> {moment(date).format("YYYY")}</span>
          </>
        ) : (
          label
        )}
      </div>
      <div className="rbc-btn-group">
        {views?.map((item) => (
          <button
            onClick={() => goToView(item)}
            key={item}
            className={clsx({ "rbc-active": view === item })}
          >
            {item}
          </button>
        ))}
      </div>
    </div>
  );
}

export default RBCToolbar;