我正在创建一个网站,该网站在首页上显示两个图表,我需要做的是在首页上创建一个复选框以过滤第一个图表。 主页的图形代码位于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} / 而且我需要在图表上用复选框过滤每种食物