Reactjs redux表单材质ui控制的日期选择器

我不能在redux表单材质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);

从“React”导入React；
从“redux form”导入{Field，reduxForm}；
从“redux表单材质ui”导入{DatePicker}；
类PeriodForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开始日期：新日期（），
}
this.handleStartDateChange=this.handleStartDateChange.bind（this）；
}
handleStartDateChange=（事件、日期）=>{
这是我的国家({
开始日期：日期
});
};
render（）{
返回(
)}}
导出默认reduxForm({
表格：'PeriodForm'，
})（周期形式）；

根据上面的代码，它总是在datepicker中不显示任何内容，它应该生成今天的日期。

---

假设我有一个包含日期列表的表，那么每次我点击日期标签时，它都会为datepicker生成它的值。如果我只是对我的this.state.startDate执行“setState”是否正确？

首先，如果您已经使用redux表单进行表单状态管理，则不应该使用本地状态存储表单值，因为redux表单已经处理了这一问题

如果要为字段提供初始值，可以通过在

MapStateTrops

阶段中传递

initialValues

来实现

此外，您不必在

字段

上显式设置

值

和

onChange

处理程序，因为导入的wrapped

日期选择器

组件中已经包含该逻辑

以下代码应该可以工作：

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);

从“React”导入React；
从'react redux'导入{connect}；
从“redux form”导入{Field，reduxForm}；
从“redux表单材质ui”导入{DatePicker}；
类PeriodForm扩展了React.Component{
render（）{
const{handleSubmit}=this.props；
返回(
);
}
}
const Form=reduxForm({
表格：'PeriodForm'，
启用重新初始化：true
})（周期形式）；
导出默认连接（（）=>({
初始值：{
起始日期：新日期（）
}
}))（表格）；

从“物料界面/日期选择器”导入日期选择器；
从“React”导入React；
常量DatePickerExampleInline=（）=>(
);
导出默认DatePickerExampleInline；

您可以使用“材料界面”，上面是工作示例。希望它能帮助你

---

我已经解决了我的问题。我将日期选择器组件重新组合如下：

MUIDatePicker.js

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

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

export default MUIDatePicker;

从“React”导入React；
从“redux表单材质ui”导入{DatePicker}
const MUIDatePicker=道具=>(
)
导出默认MUIDatePicker；

然后我叫它 场内组件道具：

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

---

似乎如果我在组件道具中直接传递DatePicker，它不会设置值

如果我想更改datepicker的值，假设我有一个包含日期列表的表，每次我点击表中的日期，我都会生成datepicker的值。我该如何处理呢？我认为实现这一点最简单的方法是将所有内容分成多个组件。一个组件将包含带有日期的表，该表定义了一个

onChange

处理程序，该处理程序在日期更改时被激发。您的PeriodForm现在也将接受外部日期属性值；在表组件中选择的一个。最后一件事情是将所选日期传递到表单组件的容器组件。然后，您可以再次使用mapStateToProps将初始值设置为外部日期值。我已经这样做了，我将prop contain selected date作为值prop传递给PeriodForm中的datepicker。我遇到的问题是，道具已更改，但它没有在datepicker中填充任何日期，它仍然为空@DennisPerhaps您还需要将

enableReinitialize:true

传递给

reduxForm（）

配置。每当

initialValues

的值更改时，表单都会重新初始化。语法是什么样子的@Dennisi想将我的redux表单与material ui集成。不仅仅是使用材质ui组件@umishra希望这会对您有所帮助虽然这可能有效，但我认为通常不鼓励对您的数据使用两个真实来源，因为这可能会导致不可预测的行为。我想是的，您还有其他解决此问题的方法吗@丹尼斯

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