无法获取未定义或空引用的属性“测试”

Unable to get property 'test' of undefined or null reference

本文关键字：属性 测试 引用 获取 未定义      更新时间：2023-09-26

我正在使用 ES6 和 React，引用似乎没有在玩球。

export default class App extends React.Component {
  test() {
    console.log(React.refs.test);
  }
  render() {
    return (
      <div className="pure-g">
        <Nav>
          <NavButton onClick={this.test}>Test</NavButton>
        </Nav>
        <Map lat="53.15" lng="-0.5" zoom="9" />
        <SearchMenu ref="test" />
      </div>
    );
  }
}

我是否错误地使用了引用？

另一方面，页面加载时突然发生了我的onClick事件。这是我的按钮组件。

export default class NavButton extends React.Component {
  render() {
    return (
      <li className="pure-menu-item" onClick={this.props.onClick}>
        <a className="pure-menu-link">{this.props.children}</a>
      </li>
    );
  }
}
引用在

组件实例上可用，而不是静态地在React本身上可用。您的参考文献应该由this.refs.test而不是React.refs.test引用。这给您的示例带来了另一个问题 - 不会使用正确的上下文调用点击事件回调。您可以通过绑定传递到按钮组件的函数来解决此问题：

export default class App extends React.Component {
  test() {
    console.log(this.refs.test);
  }
  render() {
    return (
      <div className="pure-g">
        <Nav>
          <NavButton onClick={this.test.bind(this)}>Test</NavButton>
        </Nav>
        <Map lat="53.15" lng="-0.5" zoom="9" />
        <SearchMenu ref="test" />
      </div>
    );
  }
}

将<NavButton />更改为此

<NavButton onClick={this.test.bind(this)}>Test</NavButton>

现在，测试函数中的this将是组件。

test() {
  console.log(this); //this will be your App Component
}

至于为什么您的点击在加载时触发，我会确保您实际上不会意外调用 onClick 函数：

this.props.onClick()而不是this.props.onClick

相关文章：