Reactjs 可以与自定义Javascript对象处理程序交互

我正在尝试将我的处理从jQuery迁移到ReactJS，虽然我能够处理大多数交互，但我正在努力找出如何将以下方法迁移到我的ReactJS设置>

此交互将从“应用”上的日历组件中选择值，然后设置两个隐藏的输入字段，这两个字段将在表单提交时发送到服务器

jQuery:

//Set annotationDateRange value on picker selection
    $('input[name="annotationDateRange"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        $("input[name='annotationStartDate']").val(picker.startDate.format('MM/DD/YYYY'));
        $("input[name='annotationEndDate']").val(picker.endDate.format('MM/DD/YYYY'));
    });

ReactJS（我原以为将

handleChange（）

添加到该字段会在日历选择更改时显示出来，但它们似乎以虚拟DOM不会显示的方式填充文本字段）：

从“React”导入React；
从“lodash/isEqual”进口isEqual；
导出默认类DateFilter扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={
startDateValue:this.props.startDateQuery？this.props.startDateQuery:“”，
endDateValue:this.props.endDateQuery？this.props.endDateQuery:“”
};
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
log（“新句柄更改”）
/*console.log（输入+“”+值）
这是我的国家({
[输入]：值
})*/
}
componentDidMount（）{
这是我的国家({
startDateValue:this.props.startDateQuery，
endDateValue:this.props.endDateQuery
});
}
组件将接收道具（下一步）{
if（this.props.startDateQuery！=nextrops.startDateQuery&&this.props.endDateQuery！=nextrops.endDateQuery）{
this.setState（{startDateValue:nextProps.startDateQuery，endDateValue:nextProps.endDateQuery}）；
}
}
render（）{
返回(
批注日期范围：

);
}
}

使用箭头功能不丢失组件范围

handleChange = (event) => {
    this.setState({
        [input]: value
    })
}

或您可以将其称为箭头函数

<input type="text" name="annotationDateRange" className="form-control annotationFilterDatePicker" onChange={(event) => this.handleChange(event)} autoComplete="off" />

this.handleChange（event）}autoComplete=“off”/

通过非ES6方式您可以将“this”绑定到函数

<input type="text" name="annotationDateRange" className="form-control annotationFilterDatePicker" onChange={this.handleChange.bind(this)} autoComplete="off" />

它们填充文本字段的方式似乎使虚拟DOM无法识别。这不是很清楚，你能解释一下这一点吗？因此，输入字段是一个文本字段，单击它会加载一个日历选择器，其中包含两个开始和结束日期范围的输入字段。在该日历选择器中单击“应用”时，文本字段填充了开始和结束日期（

startDate-endDate

），但我的

onChange（）

方法没有捕获到该填充，这就是为什么我认为虚拟DOM没有接收到更改的原因。如果我在字段中键入，则会触发

onChange（）

。问题中的代码已经有

this.handleChange=this.handleChange.bind（this）

。

<input type="text" name="annotationDateRange" className="form-control annotationFilterDatePicker" onChange={this.handleChange.bind(this)} autoComplete="off" />