Question

此代码在回答另一个问题时提供给我，它在Codepen中正常工作。 Original code

但是，当我尝试将其调整到我的项目时，首先，无法识别箭头功能，并且我在此箭头功能处得到了意外的令牌错误：

getBtnId = (e) => {
    //code in here
};

所以我把它改成了常规函数，现在组件看起来像这样：

export default class HelpPage extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        panelIndex: 0
    };
    this.getBtnId.bind(this);
}

getBtnId (e) {
    if(e.target && e.target.nodeName == "BUTTON") {
        console.log(e.target);
        this.setState({
            panelIndex: Number(e.target.id)
        });
  }
  return e;
};

render() {
    return (
        <div className="container">
            <HelpMenu
                getBtnId={this.getBtnId}
            />
            <HelpPanels
                panelIndex={this.state.panelIndex}
            />
        </div>
    )
}

}

然而，现在每当我按下其中一个按钮时，我都会收到错误

“未捕获的TypeError：无法读取属性'setState'的null”

我现在可以做些什么来解决这个问题？

谢谢！

Answer 1

实际上this.getBtnId.bind(this)什么都不做！

这将解决您的问题：

this.getBtnId = this.getBtnId.bind(this);

Answer 2

您的错误来自getBtnId（）内部。 “this”关键字在事件处理程序中不可用而没有特别传递。

实现此目标的标准方法是在将函数连接到组件的事件时使用'bind'：

<HelpMenu
  getBtnId={this.getBtnId.bind(this)}
/>

无法读取属性'setState'的null反应

2 个答案: