React JS 通过 onClick 更改图形 html 代码

Question

嗨，我开始学习反应.js

我想做的是按下下面的按钮

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

html代码将加载

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

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

Answer 1

你的代码应该是这样的。

react 中的事件处理程序函数可以使用 this.functionName 调用，但不能使用 this.state.functionName 调用。在你的情况下，它应该是this.clickMonth，而不是this.state.clickMonth

现在，单击按钮即可渲染线组件。因此，要在单击按钮时渲染 Line 组件，您可以将布尔标志设置为 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>
)
}