Question

我有两个select options，并且当我选择以下两个团队时，我必须在图表中显示两个团队数据：主队和客队

这是使用codepen

完成的原型

目前，当我在下拉列表中选择两者时，我只能在图表中显示带有dataKey的一个线成分，而不能显示两个团队的两个线成分。

当我在第一个Select中选择Team Home并显示状态值为hometeam的{{1}}线组件时，如何在React中说。

datakey

与{this.state.hometeam && <Line type='monotone' key={'1'} dataKey={this.state.value} stroke='#132908' yAxisId={1} activeDot={{fill: '#132908', stroke: 'none', r: 6}}/>}相同，其他选择

awayteam

在demo中，我仅显示了通用线路组件，而不依赖于状态

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

对状态进行条件式渲染

1 个答案: