我如何 Select Reactjs 中的多个复选框按钮和 Rails api

Question

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>

Answer 1

要执行多个 select，您应该在状态中保留 selected 按钮名称（或）值。

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

这样一来，就可以做到多select。您可以将按钮值保留为状态而不是名称。

我如何 Select Reactjs 中的多个复选框按钮和 Rails api

How Can I Select Multiple CheckBox Buttons in Reactjs and Rails api

ruby-on-rails

reactjs

frontend

rails-api

react-rails