Question

我正在尝试将bootstrap date range picker的处理从jQuery迁移到ReactJS，尽管我能够处理大多数交互，但我仍在努力寻找如何将以下方法迁移到我的reactjs设置> < / p>

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

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不会对其起作用的方式填充文本字段）：< / p>

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

Answer 1

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

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

或者，您可以将其称为箭头功能

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

以 NON ES6方式，您可以将“ this” 绑定到该功能。

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

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

1 个答案: