Question

我正在使用带有bind（）的react-bootstrap-datetimerangepicker库来从日历中获取所选日期，但是此库的'onApply'函数通过2个params（事件，选择器）并且在'预定义'中我没有获得startDate和endDate，假设进入第二个参数。没有绑定它不工作

<DatetimeRangePicker
    timePicker
    showDropdowns
    timePicker24Hour
    onApply={this.handleChange.bind(this, 'predefined')} />


handleChange(event, picker) {
        this.props.sendDateRanges(payload);
    }

https://github.com/luqin/react-bootstrap-datetimerangepicker

Answer 1

您需要将this绑定到handleChange函数，以使其具有词法范围。否则，handleChange没有组件this的概念，因为它是块作用域。在您的情况下，绑定的第二个/后续参数是不必要的。您上面所做的只是将字符串'predefined'预先添加到arguments数组中。相反，只需将绑定函数传递给onApply prop。

onApply={this.handleChange.bind(this)}

如果您使用es6类来定义组件，则常见的模式是在构造函数中预绑定所有事件处理程序和函数。

constructor(props) {
   super(props)
   this.handleChange = this.handleChange.bind(this)
}
handleChange(event, picker) {
   //code
}
render() {
    return <div onChange={this.handleChange} />
}

如果你想变得更加漂亮，你可以使用箭头函数语法隐式绑定词法范围。无需在任何地方调用bind。

handleChange = (event, picker) => {
    //code
}
render() {
    return <div onChange={this.handleChange} />
}

无法使用预定义的绑定功能

1 个答案: