Реагировать на условные визуализации с состояниями - PullRequest
Новая
       19

Реагировать на условные визуализации с состояниями

0 голосов
/ 25 марта 2019

У меня есть два select options, и мне нужно отображать данные двух команд в диаграммах, когда я выбираю две команды: Домашняя команда и Команда гостей

Это прототип, созданный с помощью codepen

. В настоящий момент я могу отображать на графике только один Линейный компонент с dataKey, а не компоненты 2 Линий для двух команд, когда явыберите оба в выпадающих меню.

Как я могу сказать в React, когда я выбираю Team Home в первом Select отображении hometeam Line Component со значением состояния 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 в другом выборе 

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

В демоверсии я отображал только общий компонент линии, не зависящий от состояния

1 Ответ

1 голос
/ 25 марта 2019

Ваш график удален из этого единственного 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} .../>}
  }
}
...