问获取从数据报警器中选择的输入的响应状态
EN

Stack Overflow用户

提问于 2016-02-24 09:01:08

回答 2查看 6.1K关注 0票数 0

当前正在为窗体创建一个react组件。我正在通过一个常规的javascript文件将数据报警器应用到我的输入中，这些输入都是在react (jsx)中呈现的。

当从数据报警器中选择日期时，我试图从输入中提取状态。不幸的是，react并没有拿起价值。我知道这可能与调用常规javascript文件中的datepicker到呈现的输入有关。问题是，一旦我选择了一个日期，当我在输入上调用一个常规的.val时，它会给我一个值。

还应该提到，我使用的是引导-数据报警器。

如有任何意见或建议，不胜感激:)

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
    });
  });
});

reactjs

datepicker

javascript

jquery

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-02-24 09:18:11

在将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属性之间的冲突。

票数 2

Stack Overflow用户

发布于 2016-02-24 09:26:48

这不是正确的方法，也许更好地使用反应数据报警器

但是您可以这样做来手动触发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);
      }
    });
  });
});