Tengo checkbox y funciona bien. Sin embargo, quería que se pudiera hacer clic en todo el div, no solo en la casilla de verificación.
Por favor revise aquí HAGA CLIC AQUÍ
<form onSubmit={handleSubmit}> {products.map((product) => ( <div key={product} style={{ cursor: "pointer" }}> {product} <Checkbox name="products" value={product} checked={values.products.includes(product)} onChange={({ target }) => { let updatedProducts; if (values.products.includes(product)) { updatedProducts = values.products.filter( (product) => product !== target.value ); } else { updatedProducts = [...values.products, target.value]; } setFieldValue("products", updatedProducts); }} /> </div> ))} <button type="submit">Submit</button> </form>
Envuelva la casilla de verificación en el elemento de etiqueta. Esto hará que se pueda hacer clic en el texto, es decir, "etiqueta" como parte de la entrada. Dado que los elementos de la label
se display: inline
, también deberá anular el CSS de display
para mantenerlo como un elemento de nivel de bloque.
<form onSubmit={handleSubmit}> {products.map((product) => ( <label key={product} style={{ cursor: "pointer", display: "block" }}> {product} <Checkbox name="products" value={product} checked={values.products.includes(product)} onChange={({ target }) => { let updatedProducts; if (values.products.includes(product)) { updatedProducts = values.products.filter( (product) => product !== target.value ); } else { updatedProducts = [...values.products, target.value]; } setFieldValue("products", updatedProducts); }} /> </label> ))} <button type="submit">Submit</button> </form>
Tendrías que hacer algunos cambios en tu aplicación de la siguiente manera:
<label for={product}>{product}</label> <!-- ADD LABEL TAG AND FOR HERE! <!-- <Checkbox name="products" id={product} // <-- HAVE YOUR ID SAME WITH THE FOR ABOVE value={product} checked={values.products.includes(product)} onChange={({ target }) => { let updatedProducts; if (values.products.includes(product)) { updatedProducts = values.products.filter( (product) => product !== target.value ); } else { updatedProducts = [...values.products, target.value]; } setFieldValue("products", updatedProducts); }} />;
Y dentro del componente de Input
:
<Input type="checkbox" id={id} // <-- CHANGE ID TO USE ACTUAL ID ABOVE name={name} value={value} checked={checked} onChange={onChange} />;