I am using a react-bootstrap component Checkbox
to create a general form . The component name is AdminPage, I wanted tp pass all the selected values of the checkboxes into an state (which is initialised as a state ). I am unable to do so.
Here below is the code
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>
</>
)
}
I had tried onSelect
but still not able to do so.
Aucun commentaire:
Enregistrer un commentaire