Фильтрация базы данных по флажкам

Question

Я хочу отфильтровать мой запрос Firebase по флажку, который выбрал пользователь. Я думал сделать это с флажками, но не кажется, что это хорошая идея.

Вот мой код:

handleCheckboxChange(value) {
    console.log(value);
}


<form style={{marginTop: 100}}>
    <FormGroup
        controlId="formBasicText">
        <ControlLabel>Working example with validation</ControlLabel>
        <FormGroup>
            <Checkbox onChange={() => this.handleCheckboxChange('Primary School')} inline>Primary
                School</Checkbox>
            <Checkbox inline>Middle School</Checkbox>
            <Checkbox inline>High School</Checkbox>
        </FormGroup>
        <FormGroup>
            <Checkbox inline>Math</Checkbox>
            <Checkbox inline>Chinese</Checkbox>
            <Checkbox inline>History</Checkbox>
            <Checkbox inline>Physics</Checkbox>
            <Checkbox inline>Chemistry</Checkbox>
            <Checkbox inline>Biology</Checkbox>
            <Checkbox inline>Geography</Checkbox>
            <Checkbox inline>English</Checkbox>
            <Checkbox inline>German</Checkbox>
            <Checkbox inline>Spanish</Checkbox>
            <Checkbox inline>Something</Checkbox>
            <Checkbox inline>Else</Checkbox>
            <Checkbox inline>IT</Checkbox>
            <Checkbox inline>Other</Checkbox>
        </FormGroup>
    </FormGroup>
</form>

Это флажки. Итак, проблема в том, что мне нужно получить значения типа Primary School, Biology и т. Д. И использовать их для фильтрации моей базы данных. Но я понятия не имею, как правильно их получить. Если я передаю его в качестве параметра функции (как в примере Primary School), это означает, что я должен сделать все дважды, что не имеет смысла.

Итак, мой вопрос: как я могу получить значения элемента Checkbox, не передавая его каждый раз функции?

Элемент Checkbox использует реакции-бутстрап . Выдает:

<label class="checkbox-inline" title="">
<input type="checkbox">Primary School</label>

Answer 1

Вы можете добавить все эти опции в некоторый массив

const OPTIONS = ["Math", "Chinese", "History", "Physics", ...];

и из этого массива создайте список таких флажков:

<FormGroup>
{OPTIONS.map((option, index) => (
    <Checkbox
        key={index}
        title={option}
        value={option}
       checked={this.state.options.includes(option)}
       onChange={this.handleCheckboxChange}
    />
 ))}

и для управления значениями внутри handleCheckboxChange необходимо создать состояние внутри компонента, например, this.state = {options: [""]}, а также добавлять / удалять значения в массиве таких параметров

handleCheckbox = e => {
    let val = e.target.value;
    console.log({val});
    if (this.state.options.includes(val)) {
        this.setState(prevState => ({
            options: prevState.options.filter(option => option !== val)
        }));
    } else {
        this.setState(prevState => ({
            options: [...prevState.options, val]
        }));
    }
};