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

Question

嗨，我开始学习了react.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 组件的按钮。因此，要在单击按钮时渲染 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>
   )
}

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

React JS Change graph html code by onClick

javascript

reactjs

chartjs-2.6.0