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

我是否正确使用裁判？

另一方面，突然我的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本身的静态。您的引用应由this.refs.test而不是React.refs.test引用。这给您的示例带来了另一个问题 - 无法使用正确的上下文调用click事件回调。你可以通过绑定传递给按钮组件的函数来解决这个问题：

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

Answer 2

将您的<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

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

2 个答案: