1

我有以下反应组件：

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。

图片显示这些结果。

这里：日期选择器不会弹出。它在MyForm组件内部： 在此处输入图像描述

现在使用我在 App.js 中添加的日期选择器：

在此处输入图像描述

4

1 回答 1

0

中MyForm，更改selected={this.state.fechaNacimento}为selected={this.state.myDate}。

于 2017-07-29T21:23:54.100 回答