0

因此，我尝试在我的 React 应用程序中使用 jquery 日期/时间选择器，该应用程序预装了一个叫做 smart admin 的东西。目前，我让这些工作的唯一方法是使用document.getElementById. 这有两个问题 - 1. 显然你真的不应该document.getElementById在 React 中使用或类似的东西。2. 我觉得我真的不能做任何其他日期操作，我需要。所以，下面是我想要工作的代码，但不是

DatePicker 本身：

import React from "react";
import $ from "jquery";
import "smartadmin-plugins/es6/jquery-ui.min";

export default class UiDatepicker extends React.Component {
  componentDidMount() {
    const onSelectCallbacks = [];
    const props = this.props;
    const element = $(this.refs.input);

    console.log('PROPS:', props);

    if (props.minRestrict) {
      onSelectCallbacks.push(selectedDate => {
        $(props.minRestrict).datepicker("option", "minDate", selectedDate);
      });
    }
    if (props.maxRestrict) {
      onSelectCallbacks.push(selectedDate => {
        $(props.maxRestrict).datepicker("option", "maxDate", selectedDate);
      });
    }

    //Let others know about changes to the data field
    onSelectCallbacks.push(selectedDate => {
      element.triggerHandler("change");

      const form = element.closest("form");

      if (typeof form.bootstrapValidator === "function") {
        try {
          form.bootstrapValidator("revalidateField", element);
        } catch (e) {
          console.log(e.message);
        }
      }
    });

    const options = {
      prevText: '<i class="fa fa-chevron-left"></i>',
      nextText: '<i class="fa fa-chevron-right"></i>',
      onSelect: selectedDate => {
        onSelectCallbacks.forEach(cb => {
          cb.call(cb, selectedDate);
          
          console.log(selectedDate); <----- this consoles out the date, which is what I need!!!
        });
      }
    };

    if (props.numberOfMonths) options.numberOfMonths = props.numberOfMonths;

    if (props.dateFormat) options.dateFormat = props.dateFormat;

    if (props.defaultDate) options.defaultDate = props.defaultDate;

    if (props.changeMonth) options.changeMonth = props.changeMonth;

    element.datepicker(options);
  }

  render() {
    const {
      minRestrict,
      maxRestrict,
      changesMonth,
      numberOfMonths,
      dateFormat,
      defaultDate,
      changeMonth,
      ...props
    } = { ...this.props };
    return <input type="text" {...props} ref="input" />;
  }
}

我已经读到该onSelect函数与您将要访问 onChange 一样接近，但我不知道如何在我的 Search.js 文件中使用该函数。如果我能弄清楚，那就太好了，因为我的控制台日志正在打印日期，这正是我所需要的。

我的 Search.js 文件中的代码是：

export default class Search extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ... other state
      startDate: "",
      ... other state
 }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    }
    , () => {console.log('START DATE:', this.state.startDate)});
  }

我的另一个带有 JSX 代码的文件：

                          <label className="input">
                            {" "}
                            <i className="icon-append fa fa-calendar" />
                            <UiDatepicker
                              type="text"
                              id="search-rec-min-sd"
                              minRestrict="#search-rec-max-sd"
                              placeholder="Select Date"
                              dateFormat="mm/dd/yy"
                              name="startDate"
                              value={props.data.startDate}
                              onChange={props.handleChange}
                            />
                          </label>

这不起作用。它适用于所有其他表单输入，除非我使用日期或时间选择器。有没有解决的办法？我真的不想继续使用document.getElementById（我没有在这里展示，但我认为它不是必需的）。有没有办法将该selectedDate变量传递给我的Search.js组件并将其设置在 stat 对象中？我还不够精通 React！任何帮助，将不胜感激

4

0 回答 0