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

从上面的代码中，它总是在 datepicker 中不显示任何内容，它应该生成今天的日期。 假设我有一个包含日期列表的表格，那么每次我点击日期标签时，它都会为 datepicker 生成它的值。如果我只是对我的 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

我已经解决了我的问题。我将 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，它似乎不会设置值。

Answer 3

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;

您可以使用“material-ui”，上面是工作示例。希望对你有帮助。