反应条件渲染与状态

Question

我有两个 select options，当我 select 两支球队时，我必须在图表中显示两支球队的数据：主队和客队

完成的原型

目前我只能在图表中显示带有 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 中，我只显示了不依赖于状态的通用线组件

Answer 1

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} .../>}
  }
}

反应条件渲染与状态

React Conditional Renderings with states

javascript

reactjs

user-interface

recharts