我有两个选择选项
,当我选择两支球队时,我必须在图表中显示两支球队的数据:主队和客队
这是用 codepen 完成的原型(prototype)
目前,当我在下拉列表中选择两个团队时,我只能在图表中显示带有 dataKey
的一条线组件,而不是两个团队的 2 条线组件。
当我在第一个Select
中选择Team Home时,如何在React中说显示具有datakey
状态值的hometeam
线路组件.
{this.state.hometeam && <Line type='monotone' key={'1'} dataKey={this.state.value} stroke='#132908' yAxisId={1} activeDot={{fill: '#132908', stroke: 'none', r: 6}}/>}
其他选择中的客队
也是如此
{this.state.awayteam && <Line type='monotone' key={'1'} dataKey={this.state.value} stroke='#132908' yAxisId={1} activeDot={{fill: '#132908', stroke: 'none', r: 6}}/>}
在 demo我只显示了通用线路组件,不依赖于状态
最佳答案
您的图表由这个单一的 this.state.value
驱动,当选择任一下拉菜单时,该值将被覆盖。我会将其分成该州的两个单独的属性。
state = {
data: initialState
hometeamValue: '',
awayteamValue: ''
}
handleChangeHomeTeam = (e) => {
this.setState({
hometeamValue: e.target.value,
});
};
handleChangeAwayTeam = (e) => {
this.setState({
awayteamValue: e.target.value,
});
};
render(){
return(
// ...
<select value={this.state.hometeamValue} onChange={this.handleChangeHomeTeam}>
<option value="Betis">Betis</option>
<option value="Real">Real</option>
</select>
<select value={this.state.awayteamValue} onChange={this.handleChangeAwayTeam}>
<option value="Betis">Betis</option>
<option value="Real">Real</option>
</select>
// ...
<Line dataKey={this.state.hometeamValue} ... />}
<Line dataKey={this.state.awayteamValue} .../>}
}
}
关于javascript - 用状态来 react 条件渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55339303/