为什么我不能访问事件处理程序中的状态和道具

Question

我已经写了这段代码

import React from 'react';
import DimensionPickerAction from '../actions/DimensionPickerActions.js';
import MovieLensAppStore from '../stores/MovieLensAppStore.js';

class DimensionPicker extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dimensionName: this.props.dimension,
            items: MovieLensAppStore.getAttributes(this.props.dimension),
            currentItem : MovieLensAppStore.getCurrentAttribute(this.props.dimension)
        };
    }

    onSelectionChange(event) {
        console.log(event.target.value)
        DimensionPickerAction.selectionChange(temp.state.dimensionName, event.target.value);
    }

    render() {
        var optionNodes = this.state.items.map((item) => {
            return(<option key={item.id} value={item.val}>{item.val}</option>)
        });
        return(<div><select onChange={this.onSelectionChange} defaultValue={this.state.currentItem}>{optionNodes}</select></div>);
    }

}

export default DimensionPicker;

我可以看到，当方法 onSelectionChange 被调用时，状态和道具都为空。

我发现这个帖子讨论了同样的问题

Access props and state of current component in React JS within an event handler

但该解决方案对我不起作用。我尝试创建另一个方法，然后从 onSelectionChange 调用该方法，但该方法对事件处理程序也不可见。

我还尝试将 this 指针存储在临时变量中……但这会导致语法错误。

有人知道如何在事件处理程序中访问状态和道具吗？

Answer 1

从 React .14 开始，事件处理程序不会自动绑定到组件的范围。

你可以使用我讨厌的肮脏的 .bind(this) 方法，它就像这样很慢。

render() {
    var optionNodes = this.state.items.map((item) => {
        return(<option key={item.id} value={item.val}>{item.val}</option>)
    });
    return(<div><select onChange={this.onSelectionChange.bind(this)} defaultValue={this.state.currentItem}>{optionNodes}</select></div>);
}

或者使用胖箭头函数来包装回调，这样更快并且不需要绑定范围，因为胖箭头函数在创建的范围内执行。

render() {
    var optionNodes = this.state.items.map((item) => {
        return(<option key={item.id} value={item.val}>{item.val}</option>)
    });
    return(<div><select onChange={(event) => { this.onSelectionChange(event) }} defaultValue={this.state.currentItem}>{optionNodes}</select></div>);
}