Блог

В моем проекте react у меня есть компонент react VideoJS с маркерами на нем. В нем у меня есть функция под названием jumpToSpecificMarker. У меня есть другой компонент havejumpToSpecificMarker, который имеет имена этих маркеров. Все, что я хочу сделать, это вызывать jumpToSpecificMarker всякий раз, когда я нажимаю ListItem этого listview. В настоящее время я передаю action a prop в моем событии onTouchTap в ListItem. Я хочу передать это, а также запустить функцию jumpToSpecificMarker, когда она нажимает ListItem. Я использую redux для обработки состояния всякий раз, когда я нажимаю ListItem.

Вот мой код

 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 , пожалуйста, обратите внимание, что это не обновляет состояние.