[英]Calling the method of React VideoJS component from another component
I am having a react VideoJs component with markers on it in my react project. 我的React项目中有一个带有标记的react VideoJs组件。 I have a function called jumpToSpecificMarker in it. 我有一个名为jumpToSpecificMarker的函数。 I have another component havejumpToSpecificMarker which has names of these markers. 我还有另一个组件havejumpToSpecificMarker,其中包含这些标记的名称。 All I want to do is call the jumpToSpecificMarker whenever I click listItem of this listview. 我要做的就是每当我单击此列表视图的listItem时调用jumpToSpecificMarker。 Currently I am passing action a prop in my onTouchTap event to listItem. 目前,我正在将onTouchTap事件中的一个道具传递给listItem。 I want to pass this as well as fire the jumpToSpecificMarker function when it click listItem. 我要传递此参数,并在单击listItem时触发jumpToSpecificMarker函数。 I am using redux to handle the state whenever I click listItem. 每当我单击listItem时,我都在使用redux处理状态。
Here is my code 这是我的代码
export default class PlayerLogic extends Component{
constructor() {
super();
this.state = {
player : {}
};
}
componentDidMount() {
var self = this;
var player = videojs(this.refs.video, this.props.options).ready(function () {
self.player = this;
self.player.on('play', self.handlePlay);
});
if (this.props.onPlayerInit) this.props.onPlayerInit(player);
player.markers({
markerStyle: {},
markers: [
{length: 8, startTime: 10, endTime: 15, time: 9.5, text: "Cigarette"},
{length: 2, startTime: 20, endTime: 25, time: 16, text: "Cigarette"},
{length: 15, startTime: 30, endTime: 38, time: 23.6, text: "Cigarette"},
]
});
this.setState({ player: player});
}
jumpToSpecificMarker(i) {
this.state.player.markers.jumpToSpecificMarker(i);
}
render() {
var props = blacklist(this.props, 'children', 'className', 'src', 'type', 'onPlay');
props.className = cx(this.props.className, 'videojs', 'video-js vjs-default-skin', 'vjs-big-play-centered');
assign(props, {
ref: 'video',
controls: true,
width: "700", height: "450"
});
return (
<div>
<video {... props}>
<source src={this.props.src} type={this.props.type} id={this.props.id}/>
</video>
</div>)
}
}
const mapStateToProps =(state) =>{
return {
tags: state.tagReducer
};
};
export default connect(mapStateToProps)(PlayerLogic);
I want to call the jumpToSpecificMarker function in above component from the another component which is 我想从另一个组件中调用上述组件中的jumpToSpecificMarker函数
class TagListItemDetails extends Component {
handleButtonClick() {
browserHistory.push("TagList")
}
render() {
return (
<MuiThemeProvider>
<div>
<List id="parent-list-tags">
<ListItem primaryText="Kitchen" onTouchTap={() => this.props.tagSelected(0)}/>
<ListItem primaryText="Beach" onTouchTap={() => this.props.tagSelected(1)}/>
<ListItem primaryText="Marriage" onTouchTap={() => this.props.tagSelected(2)}/>
<ListItem primaryText="Garden" onTouchTap={() => this.props.tagSelected(3)}/>
</List>
</div>
</MuiThemeProvider>
);
}
}
const mapStateToProps =(state) =>{
return {
tags: state.tagReducer
};
};
function matchDispatchToProps(dispatch){
return bindActionCreators({tagSelected: tagSelected}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(TagListItemDetails);
Where are you using the self.player
property that you defined in this block of code? 您在哪里使用在此代码块中定义的self.player
属性?
componentDidMount() {
var self = this;
var player = videojs(this.refs.video, this.props.options).ready(function () {
self.player = this;
self.player.on('play', self.handlePlay);
});
If this line of code is your mistake and you want to write self.state.player = this
instead of self.player
, please note that this does not update the state. 如果这行代码是您的错误,并且您要编写self.state.player = this
而不是self.player
,请注意,这不会更新状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.