[英]How to access “this” from a React component in a callback
I have a React component that renders a chart using Dygraphs. 我有一个使用Dygraphs渲染图表的React组件。 I want to hide the series when I click on it's label. 我想点击它的标签时隐藏这个系列。
createGraph() {
this.g = new Dygraph(
this.refs.graphdiv,
this.state.options.data,
{
strokeWidth: 1,
labels: this.state.options.labels,
drawPoints:true,
stepPlot: true,
xlabel: 'Time',
ylabel: 'Metric value',
legend: 'always',
connectSeparatedPoints: true,
series: this.state.options.series,
labelsDiv: "labels",
legendFormatter: this.legendFormatter
}
);
}
render() {
return (
<div>
<h2>Time series for system {this.props.sysId.replace(/_/g, ':')}</h2>
<h3>{this.props.date}</h3>
<div id="graphdiv" ref="graphdiv" style={{width: window.innerWidth - 50, height: window.innerHeight - 200}}></div>
<p></p>
<div id="labels"></div>
</div>
);
}
To do this I have implemented the dygraphs callback "legendFormatter" and created the labels with a onClick callback: 为此,我实现了dygraphs回调“legendFormatter”,并使用onClick回调创建了标签:
legendFormatter(data) {
if (data.x == null) {
// This happens when there's no selection and {legend: 'always'} is set.
let f = () => {
data.dygraph.setVisibility(0, false);
data.dygraph.updateOptions({})
}
// return '<br>' + data.series.map( (series) => {
// return series.dashHTML + ' ' + "<label onclick='f();'>" + series.labelHTML + "</label>"
// }, this).join('<br>');
let x = data.dygraph;
return '<br>' + data.series[0].dashHTML + ' ' + "<label onclick='console.log(x);'>" + data.series[0].labelHTML + "</label>"
}
The problem is that I cannot access the "this" from React nor I can access the variables in the legendFormatter function: 问题是我无法从React访问“this”,也无法访问legendFormatter函数中的变量:
f() is undefined f()未定义
x is undefined x未定义
How can I bind the context to the onClick function? 如何将上下文绑定到onClick函数?
You could add a constructor and bind this
to legendFormatter
: 您可以添加一个构造并绑定this
给legendFormatter
:
constructor() {
super();
this.legendFormatter = this.legendFormatter.bind(this);
}
Or you could make your legendFormatter
function into a property initialized arrow function instead: 或者您可以将legendFormatter
函数转换为属性初始化箭头函数:
legendFormatter = (data) => {
// ...
};
To access this
you need to bind the legendFormatter function 要访问this
您需要绑定legendFormatter函数
You can make use of arrow function for that 您可以使用箭头功能
legendFormatter = (data) => {
Also to access f()
and x
you can try the JSX approach like 另外要访问f()
和x
你可以尝试JSX方法
legendFormatter = (data) => {
if (data.x == null) {
// This happens when there's no selection and {legend: 'always'} is set.
let f = () => {
data.dygraph.setVisibility(0, false);
data.dygraph.updateOptions({})
}
return <br>{data.series.map( (series) => {
return {series.dashHTML}<label onClick={f()}>{series.labelHTML}</label><br>
}, this);
}
let x = data.dygraph;
return <br>{ data.series[0].dashHTML}<label onClick={()=>console.log(x);}>{data.series[0].labelHTML}</label>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.