使用React,我如何访问组件's方法
With React how can I access a component's method from another component
我有一个组件,当点击一个按钮时,它会打开一个模态,唯一的问题是我需要一个按钮来触发不同组件上的方法:
var QueueReveal = React.createClass({
getInitialState: function() {
return { clock: "0H 0M 0S" }
},
componentDidMount: function(e) {
$(document).foundation();
},
enterQueue: function(e) {
$('#Queue').foundation('open');
// Start Timer
},
leaveQueue: function(e) {
$('#Queue').foundation('close');
var data = {
msgType: "LeaveQueue",
data: {}
}
queueConn.send(JSON.stringify(data));
},
render: function() {
return (
<div>
<h1 className="text-center">You Are Now In Queue</h1>
<p className="text-center"><small>You will be notified when a potential party has been found</small></p>
<span className="line-breaker"></span>
<br/>
<h1 className="text-center">{this.props.counter}</h1>
<br/>
<a className="alert button expanded" onClick={this.leaveQueue}>Leave Queue</a>
</div>
)
}
});
ReactDOM.render(<QueueReveal/>, document.getElementById('Queue'));
var EnterQueueButton = React.createClass({
render: function() {
return (
<a href="#" id="enterQueueButton"><i className="fa fa-clock-o"></i> Enter Queue</a>
// I would like this link to trigger `QueueReveal.enterQueue`
)
}
})
ReactDOM.render(<EnterQueueButton/>, document.getElementById('EnterQueueButton'));
我希望EnterQueueButton
在单击时触发QueueReveal.enterQueue
,但我不确定如何进行。
如果它们是完全独立的组件,我要做的是让组件扩展EventEmitter
(类似这样的东西),让一个组件监听一个事件,然后另一个组件触发它。
如果您可以重构代码,使一个组件位于另一个组件中,则可以使用引用。您可以通过提供ref
密钥为组件分配引用,然后通过this.refs.<the name you gate it>
访问它,这是一个react组件,因此您可以调用其中的任何内容
相关文章:
- react组件中的绑定方法
- Angular2将组件方法导入到另一个组件中
- 从vuejs中的组件模板访问父方法
- 在React中将方法从一个组件移动到另一个组件,并且仍然可以在原始组件中使用
- 如何从Vue.js中的子组件访问父方法
- Redux-组件不同的方法(智能/哑点/容器/演示)
- 组件之后子元素中的某个方法DidMount in parrent 元素
- bind():您正在将一个组件方法绑定到该组件.React会自动为您执行此操作
- Emberjs-如何在组件方法中获取当前路由器路径
- EmberJS - 使用几个解决方案从外部调用组件方法(呼吁讨论)
- ReactJS以正确的方式绑定组件方法
- 如何从WebSocket回调访问React中的组件方法
- Angular 1.5组件方法templateUrl+函数
- React组件方法this.state.myState从child返回后未定义
- 在React中暴露组件方法
- finddomnode(组件)方法列表
- 用Sinon存根一个React组件方法
- 在ReactJs组件方法调用之间存储变量
- 我只能在使用Angular2 Universal的客户端中运行组件方法吗
- 在 constructor() 中绑定许多 React 组件方法的上下文的正确约定是什么?