复选框,用于使用react过滤图形

时间:2019-06-08 13:44:18

标签: reactjs checkbox graph filter

我正在创建一个网站,该网站在首页上显示两个图表,我需要做的是在首页上创建一个复选框以过滤第一个图表。 主页的图形代码位于dash.js,即代码:

  render () {
    //var id = null
    var id = this.props.id //---pessoal do login tem que passar id como props
    return (
      <div>
        <nav>
          <div className="container-fluid">
            <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul className="nav navbar-nav">

                <li><Link activeClass="active" className="GraphGeral" to="GraphGeral" spy={true} smooth={true} duration={500} >Colheita por alimento CSA</Link></li>
                {id !== null && <li><Link activeClass="active" className="GraphEsp_1" to="GraphEsp_2" spy={true} smooth={true} duration={500}>Colheita por alimento Usuário</Link></li>}
                <li><Link activeClass="active" className="GraphEsp_2" to="GraphEsp_1" spy={true} smooth={true} duration={500} >Temporada de Colheita CSA</Link></li>
                {id !== null && <li><Link activeClass="active" className="GraphEsp_3" to="GraphEsp_3" spy={true} smooth={true} duration={500} >Temporada de Colheita Usuário</Link></li>}                




              </ul>
            </div>
          <Filtro/>
          </div>
        </nav>
        <Element name="GraphGeral" className="element" >
        Colheita por alimento CSA
        <div className="App">
          <Pie alimentos={this.state.alimentos_geral}/>
          <RadioGroup value={this.state.alimentos_geral} onChange={this.handleChange}></RadioGroup>
        </div>

        </Element>

        {id !== null && 
        <Element name="GraphEsp_2" className="element">
        Colheita por alimento Usuário 
        <div className="App">
          <Pie alimentos={this.state.alimentos_user}/>
        </div>
        </Element>}

        <Element name="GraphEsp_1" className="element">
        Temporada de Colheita CSA
        <div className="App">
          <Chart kg={this.state.kg_geral}/>
        </div>
        </Element>

        {id !== null &&
        <Element name="GraphEsp_3" className="element">
        Temporada de Colheita Usuário
        <div className="App">
          <Chart kg={this.state.kg_user}/>
        </div>
        </Element>}



      </div>

);


}
};

export default Dash;

第一条图由以下行创建: Pie alimentos = {this.state.alimentos_geral} / 而且我需要在图表上用复选框过滤每种食物

0 个答案:

没有答案