gpt4 book ai didi

javascript - React JS 通过 onClick 更改图表 html 代码

转载 作者:行者123 更新时间:2023-12-03 01:00:08 25 4
gpt4 key购买 nike

嗨,我开始学习react.js

我想做的是按下面的按钮

<Button
color="primary"
onClick={this.state.clickMonth}>

将加载 html 代码

clickMonth = () =>{
this.setState({
month: <Line data={chartjs.monthLine.data} options=
{chartjs.monthLine.options} />
})
}

但是,它不起作用。如果需要,我可以提供更多信息。谢谢您的帮助

最佳答案

您的代码应该如下所示。

react 中的事件处理函数可以通过 this.functionName 调用,但不能通过 this.state.functionName 调用。在你的情况下,它应该是 this.clickMonth 但不是 this.state.clickMonth

现在,单击按钮即可渲染 Line 组件。因此,要在单击按钮时渲染 Line 组件,您可以将 bool 标志设置为 true 并相应地渲染 Line 组件,就像我在下面所做的那样

constructor(props){
super(props);
this.state = {
showLine: false,
showLine1: false
}
}
clickMonth = () =>{
this.setState({
showLine: true,
showLine1: false
})
}

clickYear = () =>{
this.setState({
showLine: false,
showLine1: true
})
}

render(){
const { showLine, showLine1 } = this.state;
return(
<div>

{showLine && <Line data={chartjs.monthLine.data} options=
{chartjs.monthLine.options} />}
{showLine1 && <Line data={chartjs.monthLine.data} options=
{chartjs.monthLine.options} />}
<Button color="primary" onClick={this.clickMonth} />
<Button color="primary" onClick={this.clickYear} />
</div>
)
}

关于javascript - React JS 通过 onClick 更改图表 html 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52658387/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com