代码之家 › 专栏 › 技术社区 › cphill

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

reactjs

cphill · 技术社区 · 6 年前

我正在尝试迁移 bootstrap date range picker 从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'));
    });

反应(我想加上 handleChange() 到字段将在日历选择更改时拾取,但它们似乎以虚拟DOM不拾取的方式填充文本字段):

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

1 回复 | 直到 6 年前

Eugenio Valeiras 6 年前

使用 箭头函数 不丢失组件范围。

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

或你可以 称之为箭头函数

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

在一个 非ES6方式 你可以 绑定“这个” 到函数。

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