带有 React 的 bootstrap-datepicker：onChange 不会触发，而 onClick 会触发答案

【问题标题】：bootstrap-datepicker with React: onChange doesn't fire while onClick does带有 React 的 bootstrap-datepicker：onChange 不会触发，而 onClick 会触发
【发布时间】：2016-04-20 12:10:39
【问题描述】：

考虑以下组件：

let Thing = React.createClass({
  componentDidMount: function() {
    $(ReactDOM.findDOMNode(this.refs.date)).datepicker()
  },

  myHandler: function() {
    console.log('handling!');
  }

  render: function() {
    return (
      <div ref="date" className="input-group date pull-right">
        <input ref="myRef" type="text" className="form-control"
               onChange={this.myHandler}/>
      </div>
    );
  }
});

当我更改文本字段的值时，不会调用myHandler()。

问题是，如果我将 onChange 替换为 onClick 并单击输入，myHandler 确实会触发，所以它看起来不像是上下文问题或任何东西。

为什么onChange 不起作用？
我正在使用 React v0.14.3，bootstrap-datepicker v1.7.0-dev

【问题讨论】：

它工作正常 - jsfiddle.net/OriDrori/c7p57pe9/1。可能是 myHandler 方法后面缺少的逗号。
这段代码当然是简化的，所以也许我在途中确实错过了一些东西，但它不是逗号。 לעזאזל
לעזאזל 确实。祝你好运
谢谢，这可能与我使用的第 3 方日期选择器有关（见编辑）
你用的是什么日期选择器？

标签： reactjs dom-events bootstrap-datepicker

【解决方案1】：

尝试像这样修改componentDidMount函数：

componentDidMount: function() {
  $(ReactDOM.findDOMNode(this.refs.date)).datepicker()
  var _this = this;
  $(ReactDOM.findDOMNode(this.refs.date)).on('changeDate', function(e) {
    _this.handleChange(e);
  })
}

【讨论】：

【解决方案2】：

这是一个使用 react-bootstrap-datepicker 的自定义日期选择器组件示例其中有开始日期和结束日期

import React, { Component } from "react";
import PropTypes from "prop-types";
import DatePicker from "react-bootstrap-date-picker";
import { FormGroup, Col, HelpBlock, ControlLabel } from "react-bootstrap";
import validationError from "../../utils/validation";

export default class DateSelector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fromDate: props.fromDate || new Date().toISOString(),
      toDate: props.toDate || new Date().toISOString(),
      validationState: {
        fromDate: null,
        toDate: null
      }
    };
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (
      this.state.fromDate !== nextProps.fromDate ||
      this.state.toDate !== nextProps.toDate
    ) {
      this.setState({
        fromDate: nextProps.fromDate,
        toDate: nextProps.toDate
      });
    }
  }
  //setMax selectable Date
  setMaxDate = () => {
    const aYearFromNow = new Date();
    return new Date(
      aYearFromNow.setFullYear(aYearFromNow.getFullYear() + 1)
    ).toISOString();
  };

  renderError = () => {
    return this.state.toDate >= this.state.fromDate ? null : (
      <HelpBlock>{validationError.DATE_VALIDATION_ERROR}</HelpBlock>
    );
  };

  //check for to date is greater than from value and set error in state
  validateDates = () => {
    this.state.toDate < this.state.fromDate
      ? this.setState({
          validationState: { toDate: null }
        })
      : this.setState({
          validationState: { toDate: "error" }
        });
  };

  //function to handle To(End) Date onChange
  toDateHandleChange = date => {
    this.setState({
      toDate: date
    });
    this.validateDates();
    //send data to parent component
    this.props.dateHandler({ fromDate: this.state.fromDate, toDate: date });
  };
  //function to handle From(start) Date onChange
  fromDateHandleChange = date => {
    this.setState({
      fromDate: date
    });
    this.validateDates();
    //send data to parent component
    this.props.dateHandler({ fromDate: date, toDate: this.state.toDate });
  };
  renderToDate = ( toDate, fromDate, validationState) => {
    return  (
      <FormGroup controlId="toDate" validationState={validationState.toDate}>
        <Col componentClass={ControlLabel} sm={2}>
          To
        </Col>
        <Col sm={4}>
          <DatePicker
            disabled={editable}
            id="to-date-dt"
            value={toDate}
            minDate={fromDate}
            onChange={this.toDateHandleChange}
          />
          {this.renderError()}
        </Col>
      </FormGroup>
    );
  };

  buildComponent = (props, state) => {
    const { fromDate, toDate, validationState } = state;
    return (
      <div>
        <FormGroup
          controlId="fromDate"
          validationState={this.state.validationState.fromDate}
        >
          <Col componentClass={ControlLabel} sm={2}>
            From
          </Col>
          <Col sm={4}>
            <DatePicker
              id="from-date-dt"
              value={fromDate}
              minDate={new Date().toISOString()}
              maxDate={this.setMaxDate()}
              onChange={this.fromDateHandleChange}
            />
            {this.renderError()}
          </Col>
        </FormGroup>
        {this.renderToDate(toDate, fromDate, validationState)}
      </div>
    );
  };
  render() {
    return this.buildComponent(this.props, this.state);
  }
}

DateSelector.propTypes = {
  fromDate: PropTypes.string,
  toDate: PropTypes.string,
  dateHandler: PropTypes.func.isRequired,
};

在您的组件中，您可以使用如下方式

dateHandler = data => {
    this.setState({
      fromDate: data.fromDate,
      toDate: data.toDate
    });
  };

<DateSelector
              fromDate={fromDate}
              toDate={toDate}
              dateHandler={this.dateHandler}
            />

【讨论】：