TypeError: Cannot read property 'opacity' of null
TypeError: Cannot read property 'opacity' of null
我正在尝试在 React 重新图表中将鼠标悬停在图例上时实现不透明度更改:https://jsfiddle.net/alidingling/1p40zzfe/
但是,我总是收到错误:TypeError:无法读取 null 的 属性 'opacity'。有什么原因吗?它的 Legend 组件具有导致问题的 "OnMouseEnter" 和 "OnMouseLeave" 行。
谢谢
class EducationPageRouter extends React.Component{
getInitialState() {
return {
opacity: {
car: 1,
phone: 1,
},
};
}
handleMouseEnter(o) {
const { dataKey } = o;
const { opacity } = this.state;
this.setState({
opacity: { ...opacity, [dataKey]: 0.5 },
});
}
handleMouseLeave(o) {
const { dataKey } = o;
const { opacity } = this.state;
this.setState({
opacity: { ...opacity, [dataKey]: 1 },
});
}
render() {
const { opacity } = this.state;
return (
<Card>
<CardContent>
<Typography variant="title" color="primary" gutterBottom="true">
Sales Information Display
</Typography>
<Typography variant="header1" color="primary" gutterBottom="true">
Line Graph - Number of Sales to Date Time
</Typography>
<Button variant="raised" color="primary">
Switch
</Button>
<ResponsiveContainer width="95%" aspect={9.5/3.8}>
<LineChart
data={formattedSales}
margin={{ top:5, right:10, bottom:5, left:20 }}
>
<XAxis
dataKey="date"
padding={{ left:0, right:50 }}
style={{ fontFamily: "Roboto, sans-serif" }}
tick={{ fontSize: "12.5px"}}
/>
<YAxis
dataKey="car"
/>
<CartesianGrid
stroke="#f5f5f5"
strokeDasharray="2.5 2.5"
/>
<Tooltip
wrapperStyle={{ fontFamily: "Roboto, sans-serif" }}
/>
<Legend
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
wrapperStyle={{ fontFamily: "Roboto, sans-serif" }}
verticalAlign="bottom"
height={40}
/>
<Line
type="monotone"
dataKey="car"
stroke="#4169e1"
/>
<Line
type="monotone"
dataKey="phone"
stroke="#fa8072"
/>
</LineChart>
</ResponsiveContainer>
</CardContent>
</Card>
)
}
}
getInitialState
只能与 createReactClass
一起使用,所以你的状态将是 null
。您可以改为在构造函数中设置初始状态,或使用 class 属性.
您的事件处理程序 handleMouseEnter
和 handleMouseLeave
未绑定,因此 this
不会是您在其中所期望的。解决这个问题的一种方法是在构造函数中将它们绑定到 this
,或者将它们变成 属性 初始化箭头函数。
class EducationPageRouter extends React.Component {
state = {
opacity: {
car: 1,
phone: 1,
}
};
handleMouseEnter = o => {
const { dataKey } = o;
const { opacity } = this.state;
this.setState({
opacity: { ...opacity, [dataKey]: 0.5 }
});
};
handleMouseLeave = o => {
const { dataKey } = o;
const { opacity } = this.state;
this.setState({
opacity: { ...opacity, [dataKey]: 1 }
});
};
// ...
}
我正在尝试在 React 重新图表中将鼠标悬停在图例上时实现不透明度更改:https://jsfiddle.net/alidingling/1p40zzfe/
但是,我总是收到错误:TypeError:无法读取 null 的 属性 'opacity'。有什么原因吗?它的 Legend 组件具有导致问题的 "OnMouseEnter" 和 "OnMouseLeave" 行。
谢谢
class EducationPageRouter extends React.Component{
getInitialState() {
return {
opacity: {
car: 1,
phone: 1,
},
};
}
handleMouseEnter(o) {
const { dataKey } = o;
const { opacity } = this.state;
this.setState({
opacity: { ...opacity, [dataKey]: 0.5 },
});
}
handleMouseLeave(o) {
const { dataKey } = o;
const { opacity } = this.state;
this.setState({
opacity: { ...opacity, [dataKey]: 1 },
});
}
render() {
const { opacity } = this.state;
return (
<Card>
<CardContent>
<Typography variant="title" color="primary" gutterBottom="true">
Sales Information Display
</Typography>
<Typography variant="header1" color="primary" gutterBottom="true">
Line Graph - Number of Sales to Date Time
</Typography>
<Button variant="raised" color="primary">
Switch
</Button>
<ResponsiveContainer width="95%" aspect={9.5/3.8}>
<LineChart
data={formattedSales}
margin={{ top:5, right:10, bottom:5, left:20 }}
>
<XAxis
dataKey="date"
padding={{ left:0, right:50 }}
style={{ fontFamily: "Roboto, sans-serif" }}
tick={{ fontSize: "12.5px"}}
/>
<YAxis
dataKey="car"
/>
<CartesianGrid
stroke="#f5f5f5"
strokeDasharray="2.5 2.5"
/>
<Tooltip
wrapperStyle={{ fontFamily: "Roboto, sans-serif" }}
/>
<Legend
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
wrapperStyle={{ fontFamily: "Roboto, sans-serif" }}
verticalAlign="bottom"
height={40}
/>
<Line
type="monotone"
dataKey="car"
stroke="#4169e1"
/>
<Line
type="monotone"
dataKey="phone"
stroke="#fa8072"
/>
</LineChart>
</ResponsiveContainer>
</CardContent>
</Card>
)
}
}
getInitialState
只能与 createReactClass
一起使用,所以你的状态将是 null
。您可以改为在构造函数中设置初始状态,或使用 class 属性.
您的事件处理程序 handleMouseEnter
和 handleMouseLeave
未绑定,因此 this
不会是您在其中所期望的。解决这个问题的一种方法是在构造函数中将它们绑定到 this
,或者将它们变成 属性 初始化箭头函数。
class EducationPageRouter extends React.Component {
state = {
opacity: {
car: 1,
phone: 1,
}
};
handleMouseEnter = o => {
const { dataKey } = o;
const { opacity } = this.state;
this.setState({
opacity: { ...opacity, [dataKey]: 0.5 }
});
};
handleMouseLeave = o => {
const { dataKey } = o;
const { opacity } = this.state;
this.setState({
opacity: { ...opacity, [dataKey]: 1 }
});
};
// ...
}