終極版型材料的UI控制的DatePicker

Question

我不能在終極版型材料的UI作爲控制單元使用的DatePicker。 我打算在一開始就生成今天的日期。這裏是我的代碼：

import React from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import { DatePicker } from 'redux-form-material-ui'; 

class PeriodForm extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      startDate:new Date(), 
     } 
    this.handleStartDateChange = this.handleStartDateChange.bind(this); 
    } 

    handleStartDateChange = (event, date) => { 
     this.setState({ 
     startDate: date 
     }); 
    }; 

    render(){ 
    return(
      <div> 
        <form onSubmit={handleSubmit}> 
         <div className="field-line"> 
          <Field 
           name="startDate" 
           floatingLabelText="Start Date" 
           component={DatePicker} 
           format={null} 
           value={this.state.startDate} 
           autoOk={true} 
           DateTimeFormat={Intl.DateTimeFormat} 
           onChange={handleStartDateChange} 
          /> 
         </div> 
        </form> 
        </div> 
)}} 
export default reduxForm({ 
    form: 'PeriodForm', 
})(PeriodForm); 

從上面的代碼中，它總是什麼都不顯示的日期選擇器，它應該產生今天的日期。 而讓說，如果我有一個表包含日期的列表，然後我每次點擊的日期標籤時，它就會產生它的日期選擇值。是對的，如果我只是做「setState」到我的this.state.startDate？

Answer 1

首先，如果你已經在使用Redux的形式爲您的表單狀態管理，你不應該使用本地狀態用於存儲你的表單值，因爲這已經被終極版形式的照顧。

，如果你想爲初始值提供給你的領域，你可以通過在mapStateToProps階段通過initialValues做到這一點。

而且，你不必明確設置你的Field一個value和onChange處理程序，因爲進口包裹DatePicker組件中已經有這個邏輯。

下面的代碼應該工作：

import React from 'react'; 
import { connect } from 'react-redux'; 
import { Field, reduxForm } from 'redux-form'; 
import { DatePicker } from 'redux-form-material-ui'; 

class PeriodForm extends React.Component { 
    render() { 
    const { handleSubmit } = this.props; 

    return (
     <div> 
     <form onSubmit={handleSubmit}> 
      <div className="field-line"> 
      <Field 
       name="startDate" 
       floatingLabelText="Start Date" 
       component={DatePicker} 
       format={null} 
       autoOk={true} 
       DateTimeFormat={Intl.DateTimeFormat} 
       /> 
      </div> 
     </form> 
     </div>); 
    } 
} 

const Form = reduxForm({ 
    form: 'PeriodForm', 
    enableReinitialize: true 
})(PeriodForm); 

export default connect(() => ({ 
    initialValues: { 
    startDate: new Date() 
    } 
}))(Form); 

Answer 2

import DatePicker from 'material-ui/DatePicker'; 
import React from 'react'; 

const DatePickerExampleInline =() => (
    <div> 
    <DatePicker hintText="Portrait Inline Dialog" container="inline" /> 
    <DatePicker hintText="Landscape Inline Dialog" container="inline" mode="landscape" /> 
    </div> 
); 
export default DatePickerExampleInline; 

可以用戶 「材料-UI」，上述工作的例子。希望它能幫助你。

Answer 3

我已經解決我的問題。我重構的DatePicker組分如下：

MUIDatePicker.js

import React from 'react'; 
import { DatePicker } from 'redux-form-material-ui' 

const MUIDatePicker = props => (
    <DatePicker 
    {...props} 
    value={props.val} 
    /> 
) 

export default MUIDatePicker; 

然後我調用它 部件道具內部字段：

<Field 
    name="startDate" 
    floatingLabelText="Start Date" 
    component={MUIDatePicker} 
    format={null} 
    val={this.state.startDate} 
    autoOk={true} 
    onChange={handleStartDateChange} 
    DateTimeFormat={Intl.DateTimeFormat} 
/> 

似乎如果我通過直接的DatePicker部件道具內，它不會設置該值。