Q:

Possible to Interact with Custom Javascript Object Handler

I am trying to migrate the handling of my bootstrap date range picker from jQuery to ReactJS and while I am able to handle most interactions, I am struggling to figure out how I can migrate the following method to my reactjs setup>
This interaction takes the values selected from the calendar component on "Apply" and then sets two hidden input fields that I have that are sent to my server on form submission.
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 (I thought add the handleChange() to the field would pick up on the calendar selection changes, but it appears they populate the text field in a way that the virtual DOM does not pick up on it):
import React from 'react';
import isEqual from 'lodash/isEqual';

export default class DateFilter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
              startDateValue: this.props.startDateQuery ? this.props.startDateQuery: '',
               endDateValue:this.props.endDateQuery ? this.props.endDateQuery:  ''
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        console.log("New Handle Change")
        /*console.log(input + " " + value)
        this.setState({
            [input]: value
        })*/
    }

    componentDidMount() {
        this.setState({
            startDateValue: this.props.startDateQuery,
            endDateValue: this.props.endDateQuery
        });
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.startDateQuery != nextProps.startDateQuery && this.props.endDateQuery != nextProps.endDateQuery){
                this.setState({ startDateValue: nextProps.startDateQuery, endDateValue: nextProps.endDateQuery });
            }
    }

    render() {
        return (
            <div className="col-md-3">
                <div className="input-group annotation-filter-date-range-picker">
                    <p>Annotation Date Range:</p>
                </div>
                <div className="input-group annotationFilterDatePicker">
                    <span className="input-group-addon"><i className="glyphicon glyphicon-calendar"></i></span>
                    <input type="text" name="annotationDateRange" className="form-control annotationFilterDatePicker" onChange={this.handleChange} autoComplete="off" />
                </div>
                <input type="hidden" name="annotationStartDate" className="form-control" value={this.state.startDateValue ? this.state.startDateValue : ""} onChange={this.handleChange} />
                <input type="hidden" name="annotationEndDate" className="form-control" value={this.state.endDateValue ? this.state.endDateValue : ""} onChange={this.handleChange} />
            </div>
        );
    }
}

A:

Use arrow functions to not lose the Component scope.
handleChange = (event) => {
    this.setState({
        [input]: value
    })
}

Or you can just call it as an arrow function
<input type="text" name="annotationDateRange" className="form-control annotationFilterDatePicker" onChange={(event) => this.handleChange(event)} autoComplete="off" />

In a NON ES6 way you can just bind 'this' to the function.
<input type="text" name="annotationDateRange" className="form-control annotationFilterDatePicker" onChange={this.handleChange.bind(this)} autoComplete="off" />

