将数据从 ReactAudioPlayer 传递到 Amcharts 滑块？

Question

我正在尝试将 amcharts 的控件与 React 音频播放器结合起来。在这里，我有带滑块的 amcharts 折线图。现在我正在尝试以这样一种方式控制滑块，即每当我按下 React 音频播放器的播放按钮时，我都可以使用音频播放器的搜索器移动滑块。我希望，这对你有意义。import React from "react";import ReactAudioPlayer from "react-audio-player";import audio from "/home/aniruddha/workspace/playwith_audio/anni_web_player/src/audio.flac";import * as am4core from "@amcharts/amcharts4/core";import * as am4charts from "@amcharts/amcharts4/charts";import am4themes_spiritedaway from "@amcharts/amcharts4/themes/spiritedaway";import am4themes_animated from "@amcharts/amcharts4/themes/animated";/* Chart code */// Themes beginam4core.useTheme(am4themes_spiritedaway);am4core.useTheme(am4themes_animated);class App extends React.Component {  constructor(props) {    super(props);    this.state = {slider: 1586169460800};  }    componentDidMount() {    let chart = am4core.create("chartdiv", am4charts.XYChart);    // Add data    chart.data = this.generateChartData();    // Create axes    let dateAxis = chart.xAxes.push(new am4charts.DateAxis());    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());    // Create series    let series = chart.series.push(new am4charts.LineSeries());    series.dataFields.valueY = "visits";    series.dataFields.dateX = "date";    series.strokeWidth = 1;    series.minBulletDistance = 10;    series.tooltipText = "{valueY}";    series.fillOpacity = 0.1;    series.tooltip.pointerOrientation = "vertical";    series.tooltip.background.cornerRadius = 20;    series.tooltip.background.fillOpacity = 0.5;    series.tooltip.label.padding(12, 12, 12, 12);    let seriesRange = dateAxis.createSeriesRange(series);    seriesRange.contents.strokeDasharray = "2,3";    seriesRange.contents.stroke = chart.colors.getIndex(8);    seriesRange.contents.strokeWidth = 1;    });我无法访问this.setState({slider: 1586025000000 })该sound功能。我很新的反应。欢迎提出任何建议；

Answer 1

您需要使用直接调用您的方法（或调用 bind: ）的箭头函数包装您的回调，this.sound.bind(this)以便它解析到正确的this范围：

<ReactAudioPlayer 
  src="{audio}" 
  onPlay={(ev) => this.sound(ev)} 
  onListen={(ev) => this.lis(ev)} 
  onSeeked={(ev) => this.seek(ev)} 
controls></ReactAudioPlayer>