Unable to do any other action than “alert” when triggering the click event on Highcharts (React Native)

问题

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

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.
I checked examples and all I saw was "alerts" inside the callback function.

Any ideas?

Thanks!

回答1:

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

Highcharts for React Native renders the chart within a WebView. For this reason only alerts can be made.
If you try to console.log directly (or call a method or anything else) it won't work because it's not getting to React Native, it's in the webview.
So the question was: how to pass data from the webview to React Native? And the answer iiiiis... window.postMessage()

Like this:

In the config object (passed to the chart):

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

Pass the onMessage method as prop to the ChartView such as you would pass it to a WebView (https://facebook.github.io/react-native/docs/webview#onmessage)
```
<ChartView style={{ height: 300 }} config={conf} onMessage={m => onMessage(m)} options={options}></ChartView>
```
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 ;)

来源：https://stackoverflow.com/questions/54730277/unable-to-do-any-other-action-than-alert-when-triggering-the-click-event-on-hi

标签

react-native

Highcharts

onclick