Реагировать на JS Изменить HTML-код графика с помощью onClick - PullRequest
Новая
       5

Реагировать на JS Изменить HTML-код графика с помощью onClick

0 голосов
/ 05 октября 2018

Привет, я начинаю изучать реагировать. Js

Что я хочу сделать, это нажать кнопку ниже 

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

HTML-код будет загружен 

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

однако, это не работает.Я могу предоставить больше информации, если это необходимо.Спасибо за вашу помощь

1 Ответ

0 голосов
/ 05 октября 2018

Ваш код должен быть примерно таким, как показано ниже.

Функции обработчика событий в реакции могут вызываться с помощью 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>
   )
}
...