Tengo este componente React :
import * as React from 'react'; import './Pless.css'; interface Props { handleClose: () => void; showPless: boolean; } export class Pless extends React.Component<Props> { constructor(props: Props) { super(props); } render() { const { showPless } = this.props; const showHideClassName = showPless ? 'show-div' : 'display-none'; console.log(this.props); return ( <div className={showHideClassName}> <div id="mypless" className="pless"> <div className="pless-content"> <div className="pless-header"> <span className="close" onClick={this.props.handleClose}><u>Close</u> X</span> <h2 /> </div> <div className="pless-body"> <h2 className="content-header">Header</h2> <p className="main-text">Text:</p> <ol className="main-text"> <li>List item</li> </ol> </div><div className="pless-footer"> <label htmlFor="isPless"> <input id="isPless" name="isPless" type="checkbox" /> Relevant text </label> </div> </div> </div> </div> ); } }Cuando aparece esta ventana emergente, quiero llamar a un punto final de descanso si la casilla de verificación está marcada y se hace clic en Cerrar. Si la casilla de verificación no está marcada y se presiona cerrar, no se realiza ninguna llamada. Tengo la casilla de verificación que se muestra y se puede marcar/desmarcar, pero no sé cómo llamar al punto final en función de su selección. ¿Cómo se hace esto?
Primero necesita un estado para la entrada de su casilla de verificación. Algo como:
const [boxState, setBoxState] = useState(false); entonces necesita agregar un evento de change en la entrada de la casilla de verificación:
onChange={toggleHandler}El controlador será algo como:
const toggleHandler = () => setBoxState(prevState => !prevState);En este punto de su evento de clic para cerrar, puede hacer referencia al estado de la casilla de verificación. En tu caso deberías tener algo como:
onClick={this.props.handleClose.bind(null, boxState)}; Ahora, dondequiera que se defina la función handleClose , debe modificarla para aceptar este argumento boxState , que será un valor booleano que indique si la casilla de verificación se marcó o no. Use este argumento en una declaración if para lograr lo que desea.
Escribí el siguiente ejemplo esperando que ayude:
import { useState } from 'react'; export function CheckBoxxx() { const [boxState, setBoxState] = useState(false); const toggleHandler = () => setBoxState(prevState => !prevState); const closeHandler = () => console.log(boxState ? 'Do something' : 'Do not'); return ( <> <button onClick={closeHandler}>Close</button> <label> Check me <input name="isGoing" type="checkbox" onChange={toggleHandler} /> </label> </> ); }