redux-form-material-ui 控制的 DatePicker

Question

我不能使用 redux-form-material-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);

从上面的代码来看，它总是在日期选择器中不显示任何内容，它应该生成今天的日期。假设我有一个 table 包含日期列表，那么每次我单击日期标签时，它都会为日期选择器生成它的值。如果我对 this.state.startDate 做 "setState" 对吗？

Answer 1

首先，如果您已经在使用 redux-form 进行表单状态管理，则不应使用本地状态来存储表单值，因为 redux-form 已经解决了这一问题。

如果您想为字段提供初始值，可以通过在 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;

You can user "material-ui", Above is working example. Hope it will help you.

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 中的组件道具：

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

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

redux-form-material-ui 控制的 DatePicker

redux-form-material-ui controlled DatePicker

reactjs

material-ui

redux-form