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

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

裁判都可以在组件实例，而不是静态的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> 
    ); 
    } 
} 

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