componentDidMount 中的操作不起作用

Question

我在我的应用程序中使用了 react-redux。我有一个播放器，我使用了 videojs 的 rangesliderplugin。我有一个 actioncreater，当我在视频时间轴中滑动滑块时应该触发它。 https://github.com/danielcebrian/rangeslider-videojs 上提供了一个插件。我想从此事件函数向我的操作传递一个值。这是我的代码

newMarkerTime 是我的动作

class PlayerLogic extends Component {
    constructor() {
        super();
        this.state = {
            player: {}
        };
    }

    componentDidMount() {
        var self = this;
        var options ={hidden:false};
        var player = videojs(this.refs.video, this.props.options).ready(function () {
            self.player = this;
            self.player.on('play', self.handlePlay);
        });
        player.rangeslider(options);
        player.on("sliderchange",function() {
            values = player.getValueSlider();
            this.props.newMarkerTime(values);
        });

当我滑动滑块时，会出现这样的错误。

Answer 1

这里需要使用粗箭头，或者使用上面声明的self

player.on("sliderchange",function() {
  values = player.getValueSlider();
  // this refers to player
  this.props.newMarkerTime(values);
  // self refers to your component
  self.props.newMarkerTime(values);
});

// use a fat arrow instead
player.on("sliderchange", () => {
  values = player.getValueSlider();
  // this refers to your react component
  this.props.newMarkerTime(values);
});

componentDidMount 中的操作不起作用

actions not working inside componentDidMount

javascript

rangeslider

video.js

reactjs

react-redux