Question

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

当我从datepicker中选择日期时，我试图从输入中拉出状态。不幸的是，反应没有提升价值。我知道这可能与将常规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

在您的React组件呈现到DOM之前，stepone_datepicker.js文件中的代码可能正在执行。

使用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节点，无论如何我发布的代码都是最小的更改

获取从datepicker中选择的React状态

2 个答案: