如何解决如何让组件中的 react-datepicker 工作
另一个菜鸟问题。
背景:
我有一个 JSP 解决方案,并希望将其发展为 React 解决方案。 我已经得到了大部分的工作。它有几个(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.','Connection reset by peer'))</td>
</tr>
</tbody>
</table>
</div>
</div>
)
}
}
export default Logs
如果我删除 <DatePicker ...
行,页面仍然是空白的。
问题:
- 是否可以在 react 组件中使用 react-datepicker?
- 我应该将这三个部分放在原始 Logs.js 的什么位置?
- 为什么页面变成空白?
- 还有什么关于 react-datepicker 的问题?
记住,我是一个菜鸟,我的代码是根据。
如果您知道工作教程,请在您的答案中添加网址。
解决方法
据我所知,主要问题是 Debian 提供的 nodejs 和 npm。它们不兼容。 我安装了 nodejs 的第 14 版 LTS 和那个帮助。
答案。
是的,可以在 react 组件中使用 react-datepicker。
导入位于顶部。我将它们置于 React 的导入之下....
我将状态声明放在构造函数中:
this.state = {
startDate: null,endDate: new Date()
}
我在渲染中放置了 我假设是 Debian 版本不匹配导致页面空白。 <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"/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。