javascript - 无法获取未定义或空引用的属性 'test'

Question

我正在将 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>
    );
  }
}

我是否错误地使用了 refs？

另一方面，当页面加载时，我的 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>
    );
  }
}

Answer 1

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

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