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时，状态和props都为空。

我找到了讨论相同问题的这个帖子

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

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

1 个答案: