无法读取未定义的属性 'onRowClickHandler'

Question

我是 JS 和 React-Bootstrap 的新手，并且已经阅读了一些与此错误相关的其他问题。但是，我仍然无法解决我的问题。感谢您提供的任何帮助。

我正在尝试实现一个行，单击该行将取消隐藏其下方的另一行，并提供有关该行的更多详细信息。我从另一个问题中找到了这个 onclick 处理程序，但它写成

onclickHandler = () => {}

这给了我 babel 错误，我无法将其添加到我的包中

这是我的简化代码，不包括活动对象，但假设它是一个非常简单的 json 对象

class Gateway extends React.Component {

  onRowClickHandler(e){
    const hiddenElement = e.currentTarget.nextSibling;
    hiddenElement.className.indexOf("collapse show") > -1 ? 
    hiddenElement.classList.remove("show") : hiddenElement.classList.add("show");
  }

   render() {
    function renderTable(element, index) {
      return (
        <tbody key={element.campaignId}>
          <tr onClick={() => this.onRowClickHandler()}>
            <td>{element.campaignId}</td>
            <td>{element.contextualSignal.value}</td>
            <td>{element.bid}</td>
            <td>{element.retrievalScore}</td>
          </tr>
          <tr className="collapse">
            <td colSpan="4">
              Demo Content1
            </td>
          </tr>
        </tbody>
      )} // End of renderTable.

    return (
        <Table id="retrievalTable" striped bordered hover variant="dark">
          <thead>
            <tr>
              <th>Campaign ID</th>
              <th>Contextual Signal Value</th>
              <th>Bid</th>
              <th>Retrieval Score</th>
            </tr>
          </thead>
          {this.state.campaigns.map(renderTable)}
        </Table>
      </div>
    )}
}

export default Gateway

当我点击一行时出现错误

Uncaught TypeError: Cannot read property 'onRowClickHandler' of undefined

Answer 1

this 引用不是指你的反应 class 而是指 renderTable 函数，如果你可以将它移动到 class 属性并使用 react class constructor 或 render 函数

绑定它

class Gateway extends React.Component {

onRowClickHandler(e){
    const hiddenElement = e.currentTarget.nextSibling;
    hiddenElement.className.indexOf("collapse show") > -1 ? hiddenElement.classList.remove("show") : hiddenElement.classList.add("show");
  }

renderTable(element, index) {
      return (
        <tbody key={element.campaignId}>
          <tr onClick={() => this.onRowClickHandler()}>
            <td>{element.campaignId}</td>
            <td>{element.contextualSignal.value}</td>
            <td>{element.bid}</td>
            <td>{element.retrievalScore}</td>
          </tr>
          <tr className="collapse">
            <td colSpan="4">
              Demo Content1
            </td>
          </tr>
        </tbody>
      )
    }

render() {

return (
<Table id="retrievalTable" striped bordered hover variant="dark">
          <thead>
            <tr>
              <th>Campaign ID</th>
              <th>Contextual Signal Value</th>
              <th>Bid</th>
              <th>Retrieval Score</th>
            </tr>
          </thead>
          {this.state.campaigns.map((e, i) => this.renderTable.bind(this, e, i))}
        </Table>
      </div>
    )
  }
}

export default Gateway

类似的，不要复制粘贴，下一步你应该知道了

Answer 2

你必须注意 JSX 回调中 this 的含义。在JavaScript中，class方法默认不绑定。如果忘记绑定 this.handlerFunction 并将其传递给 onClick，则在实际调用函数时将未定义。

这不是 React 特有的行为；它是函数在 JavaScript 中工作方式的一部分。一般来说，如果你引用的方法后面没有()，比如onClick={this.handlerFunction}，你应该绑定那个方法。

Handling Events Reference

有两种方法可以解决这个问题，第一种是在构造函数下绑定函数，如：

构造函数（道具）{ 超级（道具）；

// This binding is necessary to make `this` work in the callback
this.onRowClickHandler= this.onRowClickHandler.bind(this);

}

或者第二个是创建一个 arrow function，例如：

onRowClickHandler = () => {
  // your logic here
}

无法读取未定义的属性 'onRowClickHandler'

Cannot read property 'onRowClickHandler' of undefined

javascript

handler

react-bootstrap

无法读取未定义的 属性 'onRowClickHandler'

Cannot read property 'onRowClickHandler' of undefined

javascript

handler

react-bootstrap

无法读取未定义的属性 'onRowClickHandler'