jquery-timepicker不会使用React更新道具更改

时间:2017-05-19 13:59:56

标签: javascript jquery reactjs timepicker

我正在尝试在我的React应用中使用此时间戳:http://timepicker.co/。我已经编写了一个简单的类,并将当前时间传递给它,无论它在外部更改了组件。

看起来像这样:

import React, { Component } from 'react';
import jQuery from 'jquery';

require('../../../node_modules/jquery-timepicker/jquery.timepicker.js');

export default class TimePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      minTime: props.minTime || '6',
      maxTime: props.maxTime || '23',
      interval: props.interval || 15,
      defaultTime: props.defaultTime || '10',
      startTime: props.startTime || '6',
    };
    this.timepicker = {};
    this.onChange = this.onChange.bind(this);
  }

  onChange(value) {
    this.setState({
      value,
    }, () => {
      const { onChange } = this.props;

      if (typeof onChange === 'function') {
        this.props.onChange(value);
      }
    });
  }

  componentDidUpdate() {
    const {
      minTime,
      maxTime,
      interval,
      defaultTime,
      startTime,
    } = this.state;
    jQuery(this.timepicker).timepicker({
      timeFormat: 'HH:mm',
      interval,
      minTime,
      maxTime,
      defaultTime,
      startTime,
      dynamic: true,
      dropdown: true,
      scrollbar: true,
      change: (value) => {
        this.onChange(value);
      },
    });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      defaultTime: nextProps.defaultTime,
    });
  }

  componentDidMount() {
    const {
      minTime,
      maxTime,
      interval,
      defaultTime,
      startTime,
    } = this.state;

    jQuery(this.timepicker).timepicker({
      timeFormat: 'HH:mm',
      interval,
      minTime,
      maxTime,
      defaultTime,
      startTime,
      dynamic: true,
      dropdown: true,
      scrollbar: true,
      change: (value) => {
        this.onChange(value);
      },
    });
  }

  render() {
    return (
      <input
        className="timepicker"
        ref={(timepicker) => { this.timepicker = timepicker; }}
      />
    );
  }
}

TimePicker.propTypes = {
  minTime: React.PropTypes.string,
  maxTime: React.PropTypes.string,
  interval: React.PropTypes.number,
  defaultTime: React.PropTypes.string,
  startTime: React.PropTypes.string,
  onChange: React.PropTypes.func,
};

首次登录时,当前时间已设置,但是当我通过新时间并尝试setState componentWillReceiveProps时,时间将不会更新。

我错过了什么?

1 个答案:

答案 0 :(得分:0)

defaultTime用于设置初始时间,但不用于更改现有选择器中的时间。

对于更改时间,请使用以下代码(在componentDidUpdate中)

jQuery(this.timepicker).timepicker({'setTime', TIME);