获取已从日期选择器中选择的输入的 React 状态

Getting React state of input that has been selected from datepicker

本文关键字：输入 React 状态 选择 日期 选择器 获取      更新时间：2023-09-26

目前正在为表单创建一个反应组件。我正在通过常规的javascript文件将日期选择器应用于在反应（jsx）中呈现的输入。

当从日期

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

还应该提到，我正在使用引导日期选择器

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

表单.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
    });
  });
});

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

这不是

正确的方法，也许最好使用反应日期选择器

但是您可以执行此操作以手动触发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 节点，无论如何我发布的代码只需最少的更改

相关文章：