Html 在选择多个复选框时，使用ReactJs和BootstrapUI获取所有值

下面的代码用于获取选定的值（如搜索优化/搜索）。 例如，如果我点击政治复选框，我应该得到政治价值 如果我点击MovieCheckbox，我会得到MovieValue以及政治价值 如果我取消选中，它应该只显示选中的复选框值。下面是我写的代码

class Refinments extends Component {
    render(){
    const { handleChange,handleClick } = this.props;
    return(
    <Form>
       {['checkbox'].map(type => (
            <div key={`Political`} className="mb-1">
              <Form.Check 
                type={type}
                custom 
                id={`Political}`}
                label={`Political`}
                value={`Political`}
                onChange={handleChange.bind(this, "Political")}
              />
            </div>
        ))}
        {['checkbox'].map(type => (
            <div key={`movies`} className="mb-1">
              <Form.Check 
            type={type} custom
            id={`movies}`}
            label={`Movies`}
            value={`Movies`}
             onChange={handleChange.bind(this, "Movies")}
              />
            </div>
        ))}
     </Form>
     )}

export default Refinments;

类引用扩展组件{
render（）{
const{handleChange，handleClick}=this.props；
返回(
{['checkbox'].map（类型=>(
))}
{['checkbox'].map（类型=>(
))}
)}
导出默认回复；

最好的选择是将选定的值存储在状态变量中。

handleChange

方法检查更改的复选框值是否在

valArr

中，如果存在，则从数组中删除值并用新数组替换状态变量，如果不存在，则将值推送到数组中。

因此，

this.state.valArr

将始终且仅具有选中的复选框值

constructor(props) {
  super(props);
  this.state = {
    valArr: []
  }
}
handleChange = (val) => {
  let { valArr } = this.state;
  let index = valArr.indexOf(val);
  if (index != -1)
      valArr.splice(index, 1);
  else
      valArr.push(val);
  this.setState({ valArr });
}
render() {
  .
  .
  .
  <div key={`movies`} className="mb-1">
      <Form.Check 
        type={type} custom
        id={`movies}`}
        label={`Movies`}
        value={`Movies`}
        onChange={this.handleChange}
      />
  </div>
}

构造函数（道具）{
超级（道具）；
此.state={
瓦拉尔：[]
}
}
handleChange=（val）=>{
设{valArr}=this.state；
设指数=valArr.indexOf（val）；
如果（索引！=-1）
垂直拼接（索引1）；
其他的
瓦拉推（val）；
this.setState（{valArr}）；
}
render（）{
.
.
.
}

你可以更具体地说明你的需求和

['checkbox']吗。map

是毫无意义的，因为只有一次迭代，它的值将是'checkbox'。Dan Philip:从这个URL中，我选择了checkbox组件。我的需求是优化过滤器。你可以共享这个组件类的代码吗。