反应条件渲染与状态
React Conditional Renderings with states
我有两个 select options
,当我 select 两支球队时,我必须在图表中显示两支球队的数据:主队 和客队
这是用codepen
完成的原型
目前我只能在图表中显示带有 dataKey
的线组件,而不是当我 select 都在下拉列表中时两支球队的 2 线组件。
当我 select 第一个 Select
中的团队主页显示具有 datakey
状态值的 hometeam
行组件时,我如何在 React 中说。
{this.state.hometeam && <Line type='monotone' key={'1'} dataKey={this.state.value} stroke='#132908' yAxisId={1} activeDot={{fill: '#132908', stroke: 'none', r: 6}}/>}
另一个select中的awayteam
也一样
{this.state.awayteam && <Line type='monotone' key={'1'} dataKey={this.state.value} stroke='#132908' yAxisId={1} activeDot={{fill: '#132908', stroke: 'none', r: 6}}/>}
在 demo 中,我只显示了不依赖于状态的通用线组件
Your graph is driven off of this single this.state.value
which is overwritten when either dropdown is selected.我会将其拆分为该州的两个独立属性。
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} .../>}
}
}
我有两个 select options
,当我 select 两支球队时,我必须在图表中显示两支球队的数据:主队 和客队
这是用codepen
完成的原型目前我只能在图表中显示带有 dataKey
的线组件,而不是当我 select 都在下拉列表中时两支球队的 2 线组件。
当我 select 第一个 Select
中的团队主页显示具有 datakey
状态值的 hometeam
行组件时,我如何在 React 中说。
{this.state.hometeam && <Line type='monotone' key={'1'} dataKey={this.state.value} stroke='#132908' yAxisId={1} activeDot={{fill: '#132908', stroke: 'none', r: 6}}/>}
另一个select中的awayteam
也一样
{this.state.awayteam && <Line type='monotone' key={'1'} dataKey={this.state.value} stroke='#132908' yAxisId={1} activeDot={{fill: '#132908', stroke: 'none', r: 6}}/>}
在 demo 中,我只显示了不依赖于状态的通用线组件
Your graph is driven off of this single this.state.value
which is overwritten when either dropdown is selected.我会将其拆分为该州的两个独立属性。
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} .../>}
}
}