Ruby on rails 如何在Reactjs和Rails api中选择多个复选框按钮

}

使用上述方法调用此按钮代码

上面的代码只适用于单选，如何才能适用于多选

我使用rails api来存储选定的类别

toggleCheckbox = (type) => {  
  if(this.state.active_class === type)  
  {  
    this.setState({active_class:'health'});  
  }   
  else
  {
    this.setState({ active_class: type });  
  }

{this.toggleCheckbox（'health'）}>Health2
{this.toggleCheckbox（'financial'）}>financial
{this.toggleCheckbox（'career'）}>career
{this.toggleCheckbox（'people'）}>people&Relationships

要进行多选，您应将所选按钮名称（或）值保持在状态

<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>

this.state={
活动按钮：[]
}
toggleCheckbox=（类型）=>{
const{activeButtons}=this.state；
const newActiveBUttons=[…activeButtons]；
if（活动按钮。包括？（类型））{
newActiveBUttons=activeButtons.splice（activeButtons.indexOf（type），1）；
}否则{
newActiveBUttons.按钮（类型）；
}
}
渲染（）{
const{activeButtons}=this.state；
返回(
-1） ？'btn primary'：'btn default'}onClick={（）=>{this.toggleCheckbox（'health'）}>Health2
-1) ? 'btn primary'：'btn default'}onClick={（）=>{this.toggleCheckbox（'financial'）}>financial
-1) ? 'btn primary'：'btn default'}onClick={（）=>{this.toggleCheckbox（'career'）}>career
-1) ? 'btn primary'：'btn default'}onClick={（）=>{this.toggleCheckbox（'people'）}>people&Relationships
)
}

---

这样，您就可以进行多选。您可以将按钮值保留为状态而不是名称

谢谢大家!！但是它在if（activeButtons.includes？（type））{newActiveBUttons=activeButtons.splice（activeButtons.indexOf（type），1）；}else{newActiveBUttons.push（type）；}

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>
  )
}