Javascript对象中的React Use函数
Javascript对象中的React Use函数
提问于 2018-07-20 00:56:21
React与javascript库交互的一般问题。如何在javascript对象中使用React中定义的函数。有没有jQuery或纯react的方式？
示例：
我使用的是一个highcharts- react -官方库，它只是一个JS库的react包装器。
您可以像这样使用它：
const options = {
plotOptions: {
series: {
point: {
events: {
click: (e) => {
console.log(e.point.name); console.log(e.point.category); console.log(e.point.y);
this.handleFilter(); //NEED TO CALL THIS FUNCTION
}
}
}
}
}
class ChartComponent extends React.Component {
constructor() {
super();
this.state = {
someData: []
};
this.handleFilter = this.handleFilter.bind(this); //doesn't seem to work
}
handleFilter() {
console.log('Filter Triggered');
//EDIT -- Needs to be able to setState of this component here:
this.setState({someData: []});
}
render() {
return (
<div>
<HighchartsReact
highcharts={Highcharts}
options={options}
/>
</div>
);
}
}如何在该对象中使用handleFilter？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-20 03:51:45
我的方法是在react组件中添加click选项。您可以从JS获取全局options值，然后在React组件中添加单击事件回调。
事情是这样的：
var options = {}; // Any global config can go here
class ChartComponent extends React.Component {
constructor() {
super();
this.state = {
someData: []
};
this.handleFilter = this.handleFilter.bind(this);
}
handleFilter() {
console.log('Filter Triggered');
this.setState({someData: []});
}
getChartOptions() {
// Can add any other config here
if(!options.hasOwnProperty('plotOptions'))
options.plotOptions = {}
if(!options.plotOptions.hasOwnProperty('series'))
options.plotOptions.series = {}
if(!options.plotOptions.series.hasOwnProperty('events'))
options.plotOptions.events = {}
options.plotOptions.series.events = {
click: (e) => {
console.log(e.point.name);
console.log(e.point.category);
console.log(e.point.y);
this.handleFilter();
}
};
return options;
}
render() {
return (
<div>
<HighchartsReact
highcharts={Highcharts}
options={this.getChartOptions()}
/>
</div>
);
}
}PS:最近，我用HightChart JS库实现了同样的功能，而不是它的官方React库，它起作用了！
Stack Overflow用户
发布于 2018-07-20 01:35:15
您可以创建类的实例并在其上调用函数。
const chartClassInst = new ChartComponent();
const handleFilterFunction = chartClassInst.handleFilter;
const options = {
plotOptions: {
series: {
point: {
events: {
click: (e) => {
console.log(e.point.name); console.log(e.point.category); console.log(e.point.y);
handleFilterFunction();
}
}
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51428162
复制相关文章
相似问题