Question

我最近升级到redux-form v6，我的material-ui自定义日期时间选择器停止工作。这就是现在的样子：

class DateTimePicker extends React.Component {
  handleDateChanged(e, value) {
    let currentTime;
    if (this.props.dateField.value) {
      let currentValue = moment(this.props.dateField.value);
      currentTime = currentValue.subtract(currentValue.clone().startOf('day'));
    }
    let newValue = moment(value).startOf('day').add(currentTime || 0);
    this.props.dateField.onChange(newValue.toDate()); //this.refs.timePicker goes undefined when this line runs.
    this.refs.timePicker.openDialog();
  }
  handleTimeChanged(e, value) {
    return this.props.dateField.onChange(value); //This is called, but the value does not change.
  }
  formatDate(value) {
    return moment.tz(value, this.props.timezone).format('M/D/YY HH:mm zz');
  }
  render() {
    return (
      <span>
        <DatePicker
          value={this.props.dateField.value || null}
          autoOk={true}
          maxDate={new Date()}
          floatingLabelText="Change At"
          floatingLabelStyle={{pointerEvents: 'none'}}
          errorText={this.props.dateField.touched && this.props.dateField.error}
          formatDate={this.formatDate.bind(this)}
          onChange={this.handleDateChanged.bind(this)}
        />
        <TimePicker
          style={{display: 'none'}}
          value={this.props.dateField.value || null}
          format="24hr"
          hintText="Time"
          ref="timePicker"
          onChange={this.handleTimeChanged.bind(this)}
        />
      </span>
    );
  }
}

它的使用形式如下：

<Field
  name="changeAt"
  component={({input}) => {
    return <DateTimePicker dateField={input} timezone={this.props.driver.homeTerminal.timezone} />
  }}
/>

我有两个不同的问题。

第一个问题：当我选择一天时，会按预期调用handleDateChanged。方法启动时，this.refs.timePicker按预期引用时间选择器。但是，当执行上方的行（this.props.dateField.onChange(newValue.toDate())）时，参考号将丢失，而this.refs.timePicker将更改为undefined。

每次我选择一个日期时，refs都不会丢失，并且它可以正常工作。

第二个问题：当我选择一个时间时，会调用handleTimeChanged，并使用正确的值调用this.props.dateField.onChange(value);但是价值没有改变。

任何建议都表示赞赏。

Answer 1

我对这些东西不熟悉所以我不知道我是否会有很多用处。但解决第二个问题：我的代码和你的代码之间的唯一区别是我正在做<DatePicker ... onChange={this.props.onChange} />。或者你可以做

constructor(){this.handleChange = this.handleChange.bind(this)}

然后删除render（）方法中的bind。每次（props？）更改时都会调用render方法，并且问题可能与此绑定有关。

关于此问题的文档：http://redux-form.com/6.0.0-rc.4/docs/faq/CustomComponent.md/

我也使用反应元素而不是使用组件，它非常干净。

const DateInput = ({ input, label, meta: { touched, error } }) => (
<DateTimeField  onChange={input.onChange}  />
);

与

<Field name="date" component={DateInput} label="Date & Time Starting" />

以上是有效的，所以也许您可以尝试从那里迭代并添加代码，直到问题再现？

Answer 2

在底部回答问题并按照各种实施方式进行操作：

https://github.com/erikras/redux-form-material-ui/issues/37

它需要一个对象，更具体地说是一个Date对象。

format={(value) => value === '' ? null : new Date(value)}

DateTimePicker Redux表单字段问题

2 个答案: