为什么Picker没有显示在React JS中？

Question

我正在尝试实施此date picker

但它不会显示。

这是我的代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-bootstrap-date-picker";

import "./styles.css";

class App extends Component {
  componentDidUpdate() {
    // Access ISO String and formatted values from the DOM.
    var hiddenInputElement = document.getElementById("example-datepicker");
    console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z"
    console.log(hiddenInputElement.getAttribute("data-formattedvalue")); // Formatted String, ex: "11/19/2016"
  }

  render() {
    return (
      <div>
        ddd
        <DatePicker
          id="example-datepicker"
          value={this.state.value}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

（也是here）

Answer 1

您正在使用React v16，它是原始的react-bootstrap-date-picker does not (yet) support。 您可以改用react-16-bootstrap-date-picker包。

为简单起见，请参见此处以获取一个非常基本的代码示例，其中没有状态或componentDidUpdate方法：

Answer 2

如@MrMister所述，您可以安装react-16-bootstrap-date-picker

安装日期选择器将向您显示此警告：

npm WARN react-16-bootstrap-date-picker@5.1.2 requires a peer of create-react-class@^15.5.2 but none is installed. You must install peer dependencies yourself.

最终，您需要安装以下附加模块：

create-react-class
react-bootstrap

您的package.json文件应如下所示：

"dependencies": {
    "create-react-class": "^15.6.3",
    "react": "^16.6.0",
    "react-16-bootstrap-date-picker": "^5.1.2",
    "react-bootstrap": "^0.32.4",
    "react-dom": "^16.6.0",
    "react-scripts": "2.1.1"
  },