我正在使用 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