在 React js 中更改日历组件的样式

Question

我想改变我的日历组件，从旧的到新的，它们都存在于网站上，但新的不起作用，我想让它工作，当用户选择一个日期时，它会与这是我的旧网站：

这是代码：

import 'd3-transition';
import React, { Component } from 'react';

import { connect } from "react-redux";
import {  setDatePrecision, nextDate, previousDate, loadWords, loadArticles } from "../redux/actions";

class DaySelector extends Component {
  state = {
    datePrecision: "day",
    selectedDate: new Date()
  };

  render() {
    const rthis = this.props;

    const prev = () => {
      rthis.previousDate();

      this.props.loadWords();

      this.props.loadArticles();
    };

    const next = () => {
      rthis.nextDate();
      this.props.loadWords();
      this.props.loadArticles();
    }

    const dayPrecision = () => {
      rthis.setDatePrecision("day");
      this.props.loadWords();
      this.props.loadArticles();
    }

    const monthPrecision = () => {
      rthis.setDatePrecision("month");
      this.props.loadWords();
      this.props.loadArticles();
    }
  
    const current_date = this.props.selectedDate;
    const datePrecision = this.props.datePrecision;
   
    const year = current_date.getFullYear();
    const month = current_date.getMonth() + 1;
    const day = current_date.getDate();

    return (
      <div>
        <a href="#day" onClick={dayPrecision}>day </a> 
        <a href="#month" onClick={monthPrecision}>month </a> 
        <a href="#prev" onClick={prev}>&lt;&lt;&lt;</a> 
        {datePrecision === "day" ? String(day).padStart(2, "0") + "/" : ""}{String(month).padStart(2, "0")}/{year} 
        <a href="#next" onClick={next}>&gt;&gt;&gt;</a>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    selectedDate: state.wordsReducer.selectedDate,
    datePrecision: state.wordsReducer.datePrecision,
  }
};
export default connect(mapStateToProps, { setDatePrecision, nextDate, previousDate, loadWords, loadArticles })(DaySelector);

我想用这个新的 Calendar 替换它：

这是该组件的代码：

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

const MyCalendar = () => {
    const [date, setDate] = useState(new Date());
    const onChange = (date) => setDate(date);
    return (
        <div>
            <h5 className="card-title mb-0">Calendar</h5>

            <Calendar onChange={onChange} value={date} />

        </div>
    );
};

export default MyCalendar;

这些组件都在网站上，但我无法让它动态工作，我从这里安装了它

谢谢 ！

Answer 1

看起来您缺少从 onChange 传递道具，请尝试：

 <Calendar onChange={(value, event) => onChange(value)} value={date} />

或尝试：

 <Calendar onChange={(value, event) => setDate(value)} value={date} />