javascript - 根据复选框过滤数据库

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 等值，并使用它们来过滤我的数据库。但我不知道如何以正确的方式获得它们。如果我将它作为函数参数传递(就像在小学示例中一样)，则意味着我必须将所有事情都做两次，这是没有意义的。

所以我的问题是:如何获取 Checkbox 元素的值，而不是每次都将其传递给函数？

Checkbox 元素正在使用 react-bootstrap 。它呈现为:

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

Answer 1

您可以将所有这些选项添加到某个数组

const OPTIONS = ["数学", "语文", "历史", "物理", ...];

并从此数组中创建这样的复选框列表:

<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]
        }));
    }
};