多过滤复选框会做出反应

Question

import React, { Component } from "react";
import { Dropdown, Label, Icon, Checkbox } from "semantic-ui-react";
import "../../../styles/mobile.css";
import "../../../styles/player.css";

import SearchBox from "../../../../../components/SearchBox/SearchBox";
import { connect } from "react-redux";
import { dispatch } from "d3";
import { setSearchField } from "../../../../../actions/actions";
import playbutton from "../../../../../assets/Playbutton/play-circle.svg";

const allOption = [
  {
    text: "All",
    value: "all",
  },
];

const mapStateToProps = (state) => {
  return {
    searchField: state.searchMusic.searchField,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onSearchChange: (event) => dispatch(setSearchField(event.target.value)),
  };
};

class FilterTracks extends Component {
  state = {
    selectedGenre: {},
    selectedInstrument: {},
    instruments: [" "],
 checked:false
  };
  //for filteration

  onChange = (name, value) => {
    this.setState({
      checked : true,
     [name]: value
    
    })
    
    if (name === "selectedRegion") {
      this.props.updateRegion(value);
    }
  };

  render() {
    const { selectedGenre, selectedInstrument } = this.state;
    const {
      song,
      music,
      playSong,
      genres,
      instruments,
      regions,
      selectedRegion,
      onSearchChange,
    } = this.props;
    const genreOptions = allOption.concat(
      genres.map((genre) =>
        Object.assign(
          {},
          {
            text: genre.name,
            value: genre.id,
          }
        )
      )
    );

    const musicIns = music.map((instrument, index) => {
      return music[index].instruments;
    });
    const instrumentsId = instruments.map((id, index) => {
      return instruments[index].id;
    });

    const handleCheckbox = (e) => {
      let val = e.target.value;
      console.log({ val });
      if (musicIns.includes(instrumentsId)) {
        this.setState((prevState) => ({
          instruments: prevState.instruments.filter((instrument) => instrument !== val),
        }));
      } else {
        this.setState((prevState) => ({
          instruments: [...prevState.instruments, val],
        }));
      }
    };

    console.log(musicIns);
    console.log(instrumentsId);
    const instrumentsOptions = allOption.concat(
      instruments.map((instrument) =>
        Object.assign(
          {},
          {
            text: instrument.name,
            value: instrument.id,
          }
        )
      )
    );
    const regionsOptions = allOption.concat(
      regions.map((region) =>
        Object.assign(
          {},
          {
            text: region.name,
            value: region.id,
          }
        )
      )
    );




    const filterMusic = music.filter((song) => {
      const { genre, instruments, region } = song;
      const regionFilter =
        !selectedRegion.value || selectedRegion.value === "all" || selectedRegion.value === region;
      const instrumentsFilter =
        !selectedInstrument.value ||
        selectedInstrument.value === "all" ||
        // instruments.sort((id) => id === selectedInstrument.value) ||
        instruments.some((id) => id === selectedInstrument.value);
      const genreFilter =
        !selectedGenre.value ||
        selectedGenre.value === "all" ||
        genre.some((id) => id === selectedGenre.value);
      return regionFilter && instrumentsFilter && genreFilter;
    });

    return (
      <div>
        <div className="filter-container">
          <div className="title">Filter:</div>
          {/* <div> */}
          {/* <Dropdown
              style={{ color: "rgb(217, 168, 108)" }}
              text="Genre"
              className="dropdown-container"
            >
              <Dropdown.Menu style={{ border: 0 }}>
                {genreOptions.map((genre, index) => {
                  return (
                    <Dropdown.Item
                      className="dropdown-item"
                      text={genre.text}
                      onClick={() => {
                        this.onChange("selectedGenre", genre);
                      }}
                    />
                  );
                })}
              </Dropdown.Menu>
            </Dropdown>
            {selectedGenre.value && <Label className="selected-label">{selectedGenre.text}</Label>}
          </div> */}
          <div>
            <Dropdown
              text="Instruments"
              style={{ color: "rgb(217,168,108)" }}
              className="dropdown-container"
            >
              <Dropdown.Menu style={{ border: 0 }}>
                {instrumentsOptions.map((instrument, index) => {
                  console.log(instrument.text);
                  return (
                    <Checkbox
                      fitted
                      className="dropdown-item"
                      label={instrument.text}
                      value={instrument.value}
                      name={instrument.text}
                      
                      onMouseDown={() => {
                        this.onChange("selectedInstrument", instrument);
                      }}
                    />
                  );
                })}
              </Dropdown.Menu>
            </Dropdown>
            {selectedInstrument.value && (
              <Label className="selected-label">{selectedInstrument.text}</Label>
            )}
          </div>
          <div>
            <Dropdown
              text="Regions"
              className="dropdown-container"
              style={{ color: "rgb(217, 168, 108)" }}
            >
              <Dropdown.Menu style={{ border: 0 }}>
                {regionsOptions.map((region, index) => {
                  return (
                    <Dropdown.Item
                      className="dropdown-item"
                      text={region.text}
                      onClick={() => {
                        this.onChange("selectedRegion", region);
                      }}
                    />
                  );
                })}
              </Dropdown.Menu>
            </Dropdown>
            {selectedRegion.value && (
              <Label className="selected-label">{selectedRegion.text}</Label>
            )}
          </div>
        </div>
        <div className="playlist">
          {filterMusic.map((song, index) => {
            return (
              <div
                className="song-item"
                key={index}
                style={{ color: "whitesmoke", fontSize: "1.5em" }}
                onClick={() => {
                  playSong(song);
                }}
              >
                <div className="middle aligned content">
                  <img alt="playbutton" className="mr2" src={playbutton} />
                  {song.title}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(FilterTracks);

attached are my fields of filtering

以上是我的代码，用于从单选按钮过滤数据，但是对于下拉菜单，我尝试将其作为复选框过滤多个字段，但仍充当单选按钮，我如何实现此目的？我从Firebase数据库获取数据

我可以只用一个字段过滤数据，但我希望它是多个字段，如何实现呢？