获取从数据报警器中选择的输入的响应状态
当前正在为窗体创建一个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 componentstepone_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
});
});
});回答 2
Stack Overflow用户
发布于 2016-02-24 17: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属性之间的冲突。
Stack Overflow用户
发布于 2016-02-24 17: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);
}
});
});
});也许最好还是使用react-dom来获取DOM节点--我发布的代码中包含了最小的更改
https://stackoverflow.com/questions/35608430
复制相似问题
腾讯云开发者
