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

问题描述

• 我在 React Native 中使用 Highcharts

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

• 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!");
                      }
                  }
              }
          }
        }

我想在点击事件上设置状态，以便能够显示点击栏的元素，但我什至不能在它上面使用 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):

• Highcharts for React Native 在 WebView 中呈现图表.因此，只能发出警报.
• 如果您尝试直接 console.log(或调用方法或其他任何内容)，它将无法正常工作，因为它没有进入 React Native，它在 webview 中.
• 所以问题是:如何将数据从 webview 传递到 React Native?而答案 iiiis... 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>

刚才你可以在你的 react 原生 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 上的点击事件时(React Native)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！