如何让组件中的 react-datepicker 工作答案

【问题标题】：How to get react-datepicker in a Component to work如何让组件中的 react-datepicker 工作
【发布时间】：2021-02-19 12:58:31
【问题描述】：

另一个菜鸟问题。

背景：

我有一个 JSP 解决方案，并希望将其发展为一个反应解决方案。我已经完成了大部分工作。它有几个 (5) 组件 + index.js。目前我正在处理日志显示页面，需要 2 个日期选择器。

我什至不能让一个人工作。

代码：

下面是index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { CookiesProvider } from 'react-cookie';
import './index.css';
import MainMenu from './components/MainMenu'
import MainPage from './components/MainPage'
import Clients from './components/Clients'
import Logs from './components/Logs'
import Packages from './components/Packages'
const MURL='http://172.16.0.174:8080/';

class CabinCTRLGui extends React.Component{
    constructor(props){
        super(props);
        this.state = {panel: "main"};
        this.handlePanelClick = this.handlePanelClick.bind(this);
    }

    handlePanelClick(param){
        // alert("handlePanelClick: " + param);
        this.setState({
        panel: "" + param
        });
    }

    render(){
        // const masterURL='http://172.16.0.174:8080/';
        console.log(this.state.panel)
        return(
        <div className="main-panel">
            <MainMenu handlePanelClick={this.handlePanelClick}/>
            { this.state.panel === "main" && <MainPage  />}
            { this.state.panel === "clients" && <Clients MURL={MURL}/>}
            { this.state.panel === "logs" && <Logs MURL={MURL}/>}
            { this.state.panel === "packages" && <Packages MURL={MURL}/>}
        </div>
        )
    }
}

// ========================================

ReactDOM.render(
    <CookiesProvider>
    <CabinCTRLGui />
    </CookiesProvider>,
document.getElementById('root')
);

以下是 Logs.js - 来自 JSP 的 html 代码的“副本”。我可能错过了一些class->className等等。

import React from 'react'


class Logs extends React.Component{


  render(){
    return (
      <div
        className="logs-page">
        Logs Page
        <div id="logs-filter-panel">
                    <form id="updateLogForm" method="POST" action="index.jsp">
                        Page:
            <input
              id="log_page_input"
              name="log_page_input"
              type="text"
              value="1"
              />
            Page size:
            <input
              id="log_page_size_input"
              name="log_page_size_input"
              type="text"
              value="25"
              />
            <label for="startdt">
                Start Date:
            </label>
            <input
              type="text"
              class="dtpicker"
              name="startdt"
              id="startdt"
              value="1970-01-01 01:01"
              />
            <label for="enddt">
              End Date:
            </label>
            <input
              type="text"
              class="dtpicker"
              name="enddt"
              id="enddt"
              value="2021-03-12 09:38"
              />
              <label for="log_level_input_select">
                             Level:
              </label>
              <select
                id="log_level_input_select"
                name="log_level_input_select">
                                <option id="-1">ALL</option>
                                <option id="1" selected="">ERROR</option>
                                <option id="0">UNKNOWN</option>
                                <option id="3">INFO</option>
                                <option id="2">WARNING</option>
                                <option id="4">DEBUG</option>
                                <option id="2">WARN</option>
                        </select>
            <label for="log_name_input_select">
               Log:
            </label>
            <select
              id="log_name_input_select"
              name="log_name_input_select">
                 <option id="DISKFREE">DISKFREE</option>
                  <option id="KERN">KERN</option>
                                <option id="AUTH">AUTH</option>
                                <option id="MESSAGES">MESSAGES</option>
                                <option id="DPKG">DPKG</option>
                                <option id="SYSLOG">SYSLOG</option>
                                <option id="CABINCTRL" selected="">CABINCTRL</option>
                                <option id="DAEMON">DAEMON</option>
                                <option id="USER">USER</option>
                                <option id="DISKUSAGE">DISKUSAGE</option>
                                <option id="DEBUG">DEBUG</option>
                        </select>
            <input
              type="hidden"
              id="log_filter_action"
              name="action"
              value="getLog"
            />
            <input
              id="log_filter_submit"
              type="submit"
              name="Send"
              value="Send"
            />
                    </form>
                </div>
        <div id="logs-display-panel">display
            <table id="log_table">
                 <tbody>
             <tr>
               <th>Line</th>
               <th>Date</th>
               <th>Logger</th>
               <th>Level</th>
               <th>Message</th>
             </tr>
             <tr class="white">
               <td>1</td>
               <td>2021-01-03T16:20:14.960</td>
               <td>cabin_ctrl_logger</td>
               <td>ERROR</td>
               <td>('Connection aborted.', error(104, 'Connection reset by peer'))</td>
             </tr>
           </tbody>
         </table>
         </div>
      </div>
     )
  }
}

export default Logs

到目前为止，我注意到“所有”教程基本上都添加了 3 件事

1) import React, { useState } from "react";

```import DatePicker from "react-datepicker";```

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

const [startDate, setStartDate] = useState(new Date());
<DatePicker selected={startDate} onChange={date => setStartDate(date)} />

无论我把这些东西放在哪里，页面要么中断，要么变为空白。

添加 import 和 const 后，我收到 3 个警告 - 已定义但未使用

添加第三个后页面变为空白。

添加后的Logs.js。

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const [startDate, setStartDate] = useState(new Date());

class Logs extends React.Component{


  render(){
    return (
      <div
        className="logs-page">
        Logs Page
        <div id="logs-filter-panel">
                    <form id="updateLogForm" method="POST" action="index.jsp">
                        Page:
            <input
              id="log_page_input"
              name="log_page_input"
              type="text"
              value="1"
              />
            Page size:
            <input
              id="log_page_size_input"
              name="log_page_size_input"
              type="text"
              value="25"
              />
            <label for="startdt">
                Start Date:
            </label>
            <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
            <input
              type="text"
              class="dtpicker"
              name="startdt"
              id="startdt"
              value="1970-01-01 01:01"
              />
            <label for="enddt">
              End Date:
            </label>
            <input
              type="text"
              class="dtpicker"
              name="enddt"
              id="enddt"
              value="2021-03-12 09:38"
              />
              <label for="log_level_input_select">
                             Level:
              </label>
              <select
                id="log_level_input_select"
                name="log_level_input_select">
                                <option id="-1">ALL</option>
                                <option id="1" selected="">ERROR</option>
                                <option id="0">UNKNOWN</option>
                                <option id="3">INFO</option>
                                <option id="2">WARNING</option>
                                <option id="4">DEBUG</option>
                                <option id="2">WARN</option>
                        </select>
            <label for="log_name_input_select">
               Log:
            </label>
            <select
              id="log_name_input_select"
              name="log_name_input_select">
                 <option id="DISKFREE">DISKFREE</option>
                  <option id="KERN">KERN</option>
                                <option id="AUTH">AUTH</option>
                                <option id="MESSAGES">MESSAGES</option>
                                <option id="DPKG">DPKG</option>
                                <option id="SYSLOG">SYSLOG</option>
                                <option id="CABINCTRL" selected="">CABINCTRL</option>
                                <option id="DAEMON">DAEMON</option>
                                <option id="USER">USER</option>
                                <option id="DISKUSAGE">DISKUSAGE</option>
                                <option id="DEBUG">DEBUG</option>
                        </select>
            <input
              type="hidden"
              id="log_filter_action"
              name="action"
              value="getLog"
            />
            <input
              id="log_filter_submit"
              type="submit"
              name="Send"
              value="Send"
            />
                    </form>
                </div>
        <div id="logs-display-panel">display
            <table id="log_table">
                 <tbody>
             <tr>
               <th>Line</th>
               <th>Date</th>
               <th>Logger</th>
               <th>Level</th>
               <th>Message</th>
             </tr>
             <tr class="white">
               <td>1</td>
               <td>2021-01-03T16:20:14.960</td>
               <td>cabin_ctrl_logger</td>
               <td>ERROR</td>
               <td>('Connection aborted.', error(104, 'Connection reset by peer'))</td>
             </tr>
           </tbody>
         </table>
         </div>
      </div>
     )
  }
}

export default Logs

如果我删除 <DatePicker ... 行，页面仍然是空白的。

问题：

是否可以在 react 组件中使用 react-datepicker？
我应该将这三个部分放在我原来的 Logs.js 中的什么位置？
为什么页面是空白的？
关于 react-datepicker，还有什么问题？

记住，我是菜鸟，我的代码是符合的。

如果您知道一个有效的教程，请在您的答案中添加一个网址。

【问题讨论】：

标签： javascript reactjs react-component react-datepicker

【解决方案1】：

据我所知，主要问题是 Debian 提供的 nodejs 和 npm。它们不兼容。我安装了 nodejs 的第 14 版 LTS 和帮助。

答案。

是的，可以在反应组件中使用 react-datepicker。

导入在顶部。我把它们放在 React 的 import 下......

我把状态声明放在构造函数中：

this.state = {
    startDate: null,
     endDate: new Date()
}

我将

        <DatePicker
          id="startDatePicker"
          selected={this.state.startDate}
          onChange={(e) => this.setSelectedDate(e, 'startDate')}
          startDate={this.state.startDate}
          endDate={this.state.endDate}
          maxDate={new Date()}
          dateFormat="yyyy-MM-dd HH:mm"/>

我假设是 Debian 的版本不匹配导致页面变为空白。

【讨论】：