![](/img/trans.png)
[英]Calling a method on a particular instance of a React component from another component
[英]Calling the method of React VideoJS component from another component
我的React項目中有一個帶有標記的react VideoJs組件。 我有一個名為jumpToSpecificMarker的函數。 我還有另一個組件havejumpToSpecificMarker,其中包含這些標記的名稱。 我要做的就是每當我單擊此列表視圖的listItem時調用jumpToSpecificMarker。 目前,我正在將onTouchTap事件中的一個道具傳遞給listItem。 我要傳遞此參數,並在單擊listItem時觸發jumpToSpecificMarker函數。 每當我單擊listItem時,我都在使用redux處理狀態。
這是我的代碼
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);
我想從另一個組件中調用上述組件中的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);
您在哪里使用在此代碼塊中定義的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);
});
如果這行代碼是您的錯誤,並且您要編寫self.state.player = this
而不是self.player
,請注意,這不會更新狀態。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.