时间戳

首页 > 解决方案 > 如何使 react-datepicker 正确显示？

javascript - 如何使 react-datepicker 正确显示？

问题描述

我无法使组件 react-datepicker 正确显示。

它实际上是这样显示的。

我希望它至少可以像组件的文档那样显示。

我首先认为这是一个依赖问题，并添加了文档所说的所有依赖项。结果还是一样。

一些 stackoverflow 问题谈到了这一点，并提到了缺少的样式表。但是我用 npm 导入了所有东西，所以这不应该是问题。

我的类组件如下所示：

import React from "react";
import "./style.css";
import DatePicker from "react-datepicker";

class Filters extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate : new Date()
    };
    this.handleStartChange = this.handleStartChange.bind(this);
  }

  handleStartChange = (date) => {
    this.setState({
      startDate : date
    })
  }


  render() {
    return (
      <div className="filters">
          <div id="filterbox">
            <p id="titre">Filtres</p>
            <DatePicker 
              selected={this.state.startDate}
              onChange={this.handleStartChange} />
          </div>
      </div>
    )
  }
}



export default Filters;

如果问题非常明显，我提前道歉，我对 reactjs 很陌生。

标签： javascriptreactjsdatepicker

解决方案

您忘记导入包 css。

从文档中：

import "react-datepicker/dist/react-datepicker.css";

推荐阅读