不能使用预定义的绑定函数

Question

我使用react-bootstrap-datetimerangepicker库和bind（）从日历中获取选定的日期，但是这个库的“on apply”函数传递了两个参数(event、picker)，在“预定义”中，我没有得到假定出现在第二个参数中的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道具即可。

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} />
}