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={{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>
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>
You can add all those options to some array
const OPTIONS = ["Math", "Chinese", "History", "Physics", ...];
and from this array create list of checkbox like that:
<FormGroup>
{OPTIONS.map((option, index) => (
<Checkbox
key={index}
title={option}
value={option}
checked={this.state.options.includes(option)}
onChange={this.handleCheckboxChange}
/>
))}
and to manage values inside handleCheckboxChange you need to create state inside your component, it can be for example this.state = { options: [" "] } , and add/remove values to array of options like that
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]
}));
}
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.