"如何在 React-Bootstrap 的数组中推送复选框的所有选定值"

Question

我正在使用 react-bootstrap 组件Checkbox<\/code>创建通用表单。 组件名称是AdminPage<\/strong> ，我希望 tp 将复选框的所有选定值传递到状态（初始化为 state ）。 我无法这样做。

下面是代码

import React, { useState } from "react";
import { Button, Row, Col, Dropdown, Form } from "react-bootstrap";


export const AdminPage = () => {

const [name, setName] = useState('');
const [operations, setOperation] = useState([]);

const handleSubmit = () => {
  alert("Selected Checkboxes -" + operations);
}

return (
                <>
                    <div className="p-3 border border-dark bg-light ">
                        <h3 className="text-center">Add Roles Here</h3>
                        <Form className="p-3">
                            <Form.Group as={Row} className="mb-3" controlId="formBasicText">
                                <Form.Label column sm="3">
                                    Name
                                </Form.Label>
                                <Col sm="9">
                                    <Form.Control type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter Name here..." />
                                </Col>
                            </Form.Group>
                            <Form.Group as={Row} className="mb-3" controlId="formBasicText">
                                <Form.Label column sm="3">
                                    Opeations
                                </Form.Label>
                                {/* <Col sm="9">
                                    <Form.Control type="text" value={rolecredentials.operations} onChange={(e) => onChange(e, "operations")} placeholder='Eg: GETitems, GETstocks, GETpinfences, GETinventory, ADDinventory' />
                                    <Form.Text className="text-muted mx-2">
                                        Mention multiple values using comma seperator like given in placeholder
                                    </Form.Text>
                                </Col> */}
                                <Col sm="8">
                                    <Form value={operations} >
                                    <div key={`inline-checkbox`} className="mb-3">
                                        <Form.Check
                                            inline
                                            label="GETitem"
                                            name="group1"
                                            type="checkbox"
                                            value="GETitem"
                                            
                                            id={`inline-checkbox-1`}
                                        />
                                        <Form.Check
                                            inline
                                            label="GETstocks"
                                            name="group1"
                                            type="checkbox"
                                            value="GETstocks"
                                            
                                            id={`inline-checkbox-2`}
                                        />
                                        <Form.Check
                                            inline
                                            label="GETpinfences"
                                            name="group1"
                                            type="checkbox"
                                            value="GETpinfences"
                                            
                                            id={`inline-checkbox-3`}
                                        />
                                        <Form.Check
                                            inline
                                            label="GETinventory"
                                            name="group1"
                                            type="checkbox"
                                            value="GETinventory"
                                            
                                            id={`inline-checkbox-4`}
                                        />
                                        <Form.Check
                                            inline
                                            label="ADDinventory"
                                            name="group1"
                                            type="checkbox"
                                            value="ADDinventory"
                                          
                                            id={`inline-checkbox-5`}
                                        />
                                    </div>
                                    </Form>
                                </Col>
                            </Form.Group>
                            
                            <div className="w-25 m-auto mt-5 mb-3">
                                <Button variant="primary" type="submit" onClick={handleSubmit}>
                                    Add Role
                                </Button>
                            </div>
                        </Form>
                    </div>
                </>
            )
}

Answer 1

您是否尝试过:checked<\/code>伪选择器？

const checkedElements = document.querySelectorAll(":checked");