获取已从 datepicker 中选择的输入的 React 状态

Question

目前正在为表单创建一个反应组件。我正在通过常规 javascript 文件将 datepicker 应用于我的输入，这些输入在 react (jsx) 中呈现。

当从日期选择器中选择日期时，我试图从输入中提取状态。不幸的是，反应并没有获得价值。我知道这可能与从常规 javascript 文件调用 datepicker 到呈现的输入有关。问题是，当我在选择日期后在输入上调用常规 .val 时，它会为我提供值。

另外应该提一下，我正在使用 bootstrap-datepicker

任何建议或建议将不胜感激:)

form.js.jsx

var StepOne = React.createClass({
  getInitialState: function() {
    return {start: '', end: ''};
  },
startDateChange: function(e) {
    this.setState({start: e.target.value});
  },
  endDateChange: function(e) {
    this.setState({end: e.target.value});
  },
  render: function() {
    return (
      <div className="stepOne">
        <ul>
          <li>
            <label>Starts</label>
            <input id="event-start" type="text" value={this.state.start} onChange={this.startDateChange} />
            <label>Ends</label>
            <input id="event-end" type="text" value={this.state.end} onChange={this.endDateChange} />
          </li>
        </ul>
      </div>
    );
  },
}); // end of component

stepone_datepicker.js

$(function() {
  var date = new Date();
  date.setDate(date.getDate()-1);
  $('#event-start, #event-end').each(function() {
    $(this).datepicker({
      autoclose: true,
      minDate: new Date(),
      startDate: date
    });
  });
});

Answer 1

stepone_datepicker.js 文件中的代码可能在你的 React 组件渲染到 DOM 之前执行。

使用id 来引用 React 组件内的 DOM 节点很少是个好主意，而且通常会导致令人困惑的意大利面条代码。

React 为我们提供了一种通过 refs 机制获取 DOM 节点的方法。

首先，将日期选择器代码移动到组件中的新方法中。

 makeDatePicker: function(element) {
   var date = new Date();
   date.setDate(date.getDate() - 1);

   $(element).datepicker({
     autoclose: true,
     minDate: new Date(),
     startDate: date
   });
 }

现在我们可以为每个输入添加ref 属性，并将这个新方法用作回调。

<label>Starts</label>
<input ref={this.makeDatePicker} type="text" value={this.state.start} onChange={this.startDateChange} />
<label>Ends</label>
<input ref={this.makeDatePicker} type="text" value={this.state.end} onChange={this.endDateChange} />

当元素准备好时，React 将调用makeDatePicker 并将 DOM 节点作为第一个参数传递。

之后就可以截取DOM节点并应用jQuery插件了。

这样您甚至可以渲染StepOne 组件的多个实例，而不必担心id 属性之间的冲突。

Answer 2

这不是正确的做法，使用react-datepicker 可能更好

但是你可以这样做来手动触发onChange事件

$(function() {
  var date = new Date();
  date.setDate(date.getDate()-1);
  $('#event-start, #event-end').each(function() {
    $(this).datepicker({
      autoclose: true,
      minDate: new Date(),
      startDate: date,
      onSelect: function( selectedDate ) {
       var event = new Event('input', { bubbles: true });
       this.dispatchEvent(event);
      }
    });
  });
});

也许更好地使用react-dom 来获取 DOM 节点，我发布的代码更改最少