我是流星的新手并做出反应,对不起,如果这是一个愚蠢的问题。
我试图在我的流星项目中设置反应日期时间选择器但没有成功。
下面是项目结构(与流星官方指南中的todo应用程序相同)
imports
-ui
-App.jsx
-Example.jsx
Example.jsx中的代码(我从http://dev.quri.com/react-bootstrap-datetimepicker/] 1中的受控组件示例中复制了
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';
// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
class Example extends React.Component {
constructor (props) {
super(props)
this.state = {
startDate: moment()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render() {
return <DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
/>;
}
}
App.jsx中的代码
import React, { Component } from 'react';
import Example from './Example.jsx';
import DatePicker from 'react-datepicker';
import moment from 'moment';
export default class App extends Component {
render() {
return (
<div className="container">
<h1> Time selecting </h1>
<DatePicker selected={this.state.date} onChange={this.handleChange} />
</div>
)
};
}
在我尝试添加datetimepicker并添加行之前,我的应用可以运行并打印“时间选择”行
<DatePicker selected={this.state.date} onChange={this.handleChange} />
App.jsx中的
如何正确使用datetimepicker?
现在我删除了Example.jsx文件,并将App.jsx中的文件更改为
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
date: "1990-06-05",
format: "YYYY-MM-DD",
inputFormat: "DD/MM/YYYY",
mode: "date"
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render() {
return (
<div className="container">
<h1> Time selecting </h1>
<DatePicker selected={this.state.startDate}
onChange = {this.handleChange} />
</div>
)
}
}
但浏览器仍然没有显示任何内容。
答案 0 :(得分:1)
你可能只复制了<DatePicker>
部分,你还应该包括handleChange回调函数和初始状态,如下所示。
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {date: moment()};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render() {
return <div className="container">
<h1> Time selecting </h1>
<DatePicker selected={this.state.date}
onChange={this.dateChanged} />
</div>
}
}