除“警告"外，无法执行其他任何操作.在Highcharts上触发click事件时(React Native) [英] Unable to do any other action than "alert" when triggering the click event on Highcharts (React Native)

问题描述

• 我在React Native中使用Highcharts

• 对于条形图，我定义了以下click事件:

• Im using Highcharts in React Native

• For a bar chart I have the following click event defined:

plotOptions: {
          series: {
              cursor: 'pointer',
              point: {
                  events: {
                      click: () => {
                        alert("Clicked!");
                      }
                  }
              }
          }
        }

我希望在click事件上设置setState以便能够显示被单击的栏的元素，但是我什至不能在其上使用console.log().

I would like to setState on the click event to be able to display the elements of the clicked bar, but I cant even console.log() on it.

有什么想法吗?

谢谢！

推荐答案

它现在正在工作！问题出在以下(据我了解):

It's working now! The problem was the following (as I understand it):

• React Native的Highcharts在WebView中呈现图表.因此，只能发出警报.
• 如果您尝试直接console.log(或调用方法或其他任何方法)，则该方法将无法正常工作，因为它无法访问React Native，它位于Web视图中.
• 所以问题是:如何将数据从Webview传递到React Native?还有答案……window.postMessage()

赞:

1. 在配置对象中(传递给图表):

1. In the config object (passed to the chart):

plotOptions: {
      series: {
          point: {
              events: {
                  click: function() {
                    window.postMessage( //data you want to send to react native )
                  }
              }
          }
      }
    }

将onMessage方法作为prop传递给ChartView，就像将其传递给WebView一样( https://facebook.github.io/react-native/docs/webview#onmessage )

<ChartView style={{ height: 300 }} config={conf} onMessage={m => onMessage(m)} options={options}></ChartView>

现在您可以在自己的本地onMessage函数中进行console.log，setState或任何操作

Just now you can console.log, setState, or do anything in your react native onMessage function

onMessage = (m) => { 
   console.log(m.nativeEvent.data)
}

就是这样，现在我可以单击一个栏并更改组件的状态;)

And that's it, now I can click a bar and change the state of my component ;)

这篇关于除“警告"外，无法执行其他任何操作.在Highcharts上触发click事件时(React Native)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！