jeudi 5 juillet 2018

Filtering a database based on checkboxes

I want to filter my Firebase query by the checkbox the user picks. I was thinking to do it with checkboxes, but not it doesn't seem like such a good idea.

Here's my code:

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


<form style=>
    <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>

These are the checkboxes. So the problem is, I need to get the values like Primary School, Biology and so on, and use them to filter my db. But I have no idea how to get them the right way. If I pass it as a function parameter (like in the Primary School example) it means I have to do everything twice, which makes no sense.

So my question is: How can I get the values of the Checkbox element, without passing it to a function every time?

The Checkbox element is using react-bootstrap. It renders out to:

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




Aucun commentaire:

Enregistrer un commentaire