用状态对条件呈现作出反应

Question

我有两个select options，当我选择两支球队时，我必须在图表中显示这两支球队的数据：Home Team和Away

这是用码页完成的原型

目前，我只能在图表中显示带有dataKey的一行组件，而不能在下拉列表中同时显示两队的2行组件。

当我在第一个Select中选择Team时，如何在React中使用hometeam状态值显示hometeam Line。

{this.state.hometeam && <Line type='monotone' key={'1'} dataKey={this.state.value} stroke='#132908' yAxisId={1} activeDot={{fill: '#132908', stroke: 'none', r: 6}}/>}

其他选择中的awayteam相同

{this.state.awayteam && <Line type='monotone' key={'1'} dataKey={this.state.value} stroke='#132908' yAxisId={1} activeDot={{fill: '#132908', stroke: 'none', r: 6}}/>}

在演示中，我只显示了不依赖于状态的泛型行组件

Answer 1

您的图是从这个单一的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} .../>}
  }
}