我有以下反应组件:
import React from 'react'
import DatePicker from 'react-datepicker'
import moment from 'moment'
import 'react-datepicker/dist/react-datepicker.css'
class MyForm extends React.Component {
constructor(props) {
super(props)
this.state = {
//properties...
myDate : moment()
}
this.handleDateChange = this.handleDateChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleDateChange(date) {
this.setState({
myDate : date
})
}
handleSubmit(event) {
event.preventDefault()
// implementation...
}
render() {
return (
<form onSubmit={ this.handleSubmit }>
/* more components here... */
<DatePicker
dateFormat='DD/MM/YYYY' maxDate={ moment() }
fixedHeight peekNextMonth showMonthDropdown showYearDropdown dropdownMode='select'
selected={ this.state.myDate } onChange={ this.handleDateChange }
/>
</form>
)
}
}
export default MyForm
该组件显示在反应路由器使用的链接下。在我的 App.js 中:
class App extends Component {
render() {
<Router>
<div className="App">
<Link to="/myForm">My Form</Link>
<Route path="/myForm" component={MyForm} />
</div>
</Router>
}
}
当我访问时http://localhost:3000/myForm
,日期选择器组件显示为文本框,没有动画,没有日期选择器显示,什么都没有。
然后,我尝试只使用<DatePicker>
内部 App.js 并像示例中一样工作:
class App extends Component {
constructor(props) {
super(props)
this.state = {
dateField : moment()
}
this.handleDateChange = this.handleDateChange.bind(this)
}
handleDateChange(date) {
this.setState({
dateField: date
})
}
render() {
<Router>
<div className="App">
<Link to="/myForm">My Form</Link>
<Route path="/myForm" component={MyForm} />
</div>
<DatePicker
dateFormat='DD/MM/YYYY' maxDate={ moment() }
fixedHeight peekNextMonth showMonthDropdown showYearDropdown dropdownMode='select'
selected={ this.state.dateField } onChange={ this.handleDateChange }
/>
</Router>
}
}
现在,我在 处看到了两个组件http://localhost:3000/myForm
,不同之处在于选择器MyForm
仍然无法弹出,但其中的选择器会弹出App
。
图片显示这些结果。
现在使用我在 App.js 中添加的日期选择器: