Soy un novato en react y no pude averiguar cómo restablecer la casilla de verificación para desmarcar la estadística al restablecer. He usado el react-bootstrap form y necesito restablecer las casillas de verificación al estado predeterminado al hacer clic en un botón.
export const pitch: FC<pitchProps> = ({ pitchData, totalNoOfData }) => { const [loading, setLoading] = useState(false); const [totalRows, setTotalRows] = useState(totalNoOfData); const formData = { searchData: pitchParam.searchString, searchCriteria: pitchParam.searchStatus, }; const handleFormData = (e: any) => { if (e.target.type === "checkbox") { e.target.checked ? formData.searchCriteria.push(e.target.id) : (formData.searchCriteria = formData.searchCriteria.filter( (item: any) => item !== e.target.id )); } else { formData.searchData = e.target.value; } }; return ( <div className={styles.mainTableContainer}> <div className="d-flex ml-2"> <Form className="w-100"> <Form.Row> <Form.Label className={styles.label}>NEW </Form.Label> <Form.Check className={styles.checkbox} type="checkbox" id="OLD" onChange={(e: any) => handleFormData(e)} /> <Form.Label className={styles.label}> OLD </Form.Label> <Form.Check className={styles.checkbox} type="checkbox" id="OUTDATED" onChange={(e: any) => handleFormData(e)} /> <Form.Label className={styles.label}>OUTDATED </Form.Label> <Form.Check className={styles.checkbox} type="checkbox" id="SUCCESS" onChange={(e: any) => handleFormData(e)} /> </Form.Row> </Form> </div> </div> ); };Su componente de checkbox de verificación no está completamente controlado por usted, por lo que es un componente no controlado.
Como su checkbox de verificación está controlada por el formulario de arranque, debe crear una referencia y pasarla a la casilla de verificación para manipular el valor checked :
import React, {useRef} from 'react'; // reset of the codes // in the pitch component const checkboxRef = useRef(null); Ahora, pase el checkboxRef al componente checkbox dentro de la propiedad ref :
<Form.Check type={type} id={`default-${type}`} label={`default ${type}`} ref={checkboxRef} // <--------- here />Ahora, intente agregar otro botón con un controlador de reinicio:
const handleResetCheckbox = () => { checkboxRef.current.checked = false }También puede hacer lo mismo con un enfoque diferente utilizando la clave del componente React. Si la clave cambia, reaccionar eliminará el componente y creará uno nuevo. por lo que puede usar esta propiedad clave para desmarcar (restablecer) las casillas de verificación:
defina una key con useState y pásela al componente checkbox:
const [key, setKey] = useState(false) <Form.Check key={key} // <--------- added here type={type} id={`default-${type}`} label={`default ${type}`} /> Ahora, en handleResetCheckbox , cambie la clave:
const handleResetCheckbox = () => { setKey(prevState => !prevState) }Entonces, cuando restablece la casilla de verificación, la clave cambiará y React eliminará la casilla de verificación anterior y generará una nueva. más información en la documentación de React .