Как я могу выбрать несколько кнопок CheckBox в API Reactjs и Rails - PullRequest
Новая
       43

Как я могу выбрать несколько кнопок CheckBox в API Reactjs и Rails

0 голосов
/ 26 июня 2018 
toggleCheckbox = (type) => {  
  if(this.state.active_class === type)  
  {  
    this.setState({active_class:'health'});  
  }   
  else
  {
    this.setState({ active_class: type });  
  }

}

Этот код кнопки вызывается указанным выше методом

Вышеприведенный код работает только для одиночного выбора. Как я могу сделать это для множественного выбора?

И я использовал rails api для хранения спящих категорий 

<Button value="1" className={this.state.active_class === 'health' ? 'btn-primary': 'btn-default'} onClick={()=>{this.toggleCheckbox('health')}} > Health2 </Button>           
<Button value="2" className={this.state.active_class ==='financial' ? 'btn-primary': 'btn-default'} onClick={()=>{this.toggleCheckbox('financial')}} > Financial </Button>
<Button value="3" className={this.state.active_class === 'career' ? 'btn-primary': 'btn-default'} onClick={()=>{this.toggleCheckbox('career')}} > Career </Button>
<Button value="4" className={this.state.active_class === 'people' ? 'btn-primary': 'btn-default'} onClick={()=>{this.toggleCheckbox('people')}} > People & Relationships </Button>

1 Ответ

0 голосов
/ 26 июня 2018

Чтобы сделать множественный выбор, вы должны сохранить выбранные значения имен кнопок (или) в состоянии. 

this.state = {
  activeButtons: []
}

toggleCheckbox = (type) => {
  const { activeButtons } = this.state;
  const newActiveBUttons = [...activeButtons];

  if(activeButtons.includes?(type)){
    newActiveBUttons = activeButtons.splice(activeButtons.indexOf(type), 1 );
  } else {
    newActiveBUttons.push(type);
  }
}

render () {
  const { activeButtons } = this.state;

  return (
    <Button value="1" className={(activeButtons.indexOf('health') > -1)  ? 'btn-primary': 'btn-default'} onClick={()=>{this.toggleCheckbox('health')}} > Health2 </Button>           
    <Button value="2" className={(activeButtons.indexOf('financial') > -1) ? 'btn-primary': 'btn-default'} onClick={()=>{this.toggleCheckbox('financial')}} > Financial </Button>
    <Button value="3" className={(activeButtons.indexOf( 'career') > -1) ? 'btn-primary': 'btn-default'} onClick={()=>{this.toggleCheckbox('career')}} > Career </Button>
    <Button value="4" className={(activeButtons.indexOf( 'people') > -1) ? 'btn-primary': 'btn-default'} onClick={()=>{this.toggleCheckbox('people')}} > People & Relationships </Button>
  )
}

Таким образом, вы можете сделать множественный выбор. Вы можете сохранить значение кнопки в состоянии вместо имен.

...