Question

我正在尝试创建一个作为文本输入的react组件。当有人按下Enter键时，必须调用myMethod（）。但是在handleKeyPress中，我无法访问类范围。我该如何解决这个问题？

class MyContainer extends Component {
    constructor(props, context) {
        super(props, context);        
    }

   myMethod(){}


    handleKeyPress(target) {
        var self = this;
        if(target.charCode === 13) {
            this.myMethod();
        }
    }

    render() {
        <input onKeyPress={this.handleKeyPress}  ref={(input) => this.inputMax = input} type="text" />
    }
}

Answer 1

您需要绑定处理程序。

class MyContainer extends Component {
    constructor(props, context) {
        super(props, context);
        this.handleKeyPress = this.handleKeyPress.bind(this);
    }

   myMethod(){}


    handleKeyPress(target) {
        var self = this;
        if(target.charCode === 13) {
            this.myMethod();
        }
    }

    render() {
        <input onKeyPress={this.handleKeyPress}  ref={(input) => this.inputMax = input} type="text" />
    }
}

另一种解决方案可以是使用箭头功能（具有性能缺陷）或@autobind decorator

Answer 2

您需要在构造函数中绑定函数。

constructor(props, context) {
    super(props, context);
    this.handleKeyPress = this.handleKeyPress.bind(this)
}

在事件处理程序上反应无法访问类范围

2 个答案: