Quiero hacer clic en varias casillas de verificación en mi componente de reacción y controlar qué casillas de verificación están marcadas. Quiero confirmar cuando haga clic en 'Verificar' que el nombre y la dirección estén marcados pasando el estado marcado de cada casilla de verificación. alguien me puede ayudar en eso?
export class Form extends React.Component<FormProps, { ..., isChecked?: boolean }> { constructor(props: FormProps) { super(props); this.state = { ..., isChecked:false }; private checkField = () => { console.log('state is '+this.state.isChecked) } } } render() { return<Fragment> <Input name="Name" required={true} handleChecked={(isChecked: boolean) => this.setState({isChecked})} /> <Input name="Address" required={true} handleChecked={(isChecked: boolean) => this.setState({isChecked})} /> <Input name="Birthdate" /> <div onClick={this.checkField}> Verify</div> </Fragment> } } export function Input(props: React.PropsWithChildren<{name: string, required?: boolean, handleChecked?: (checked: boolean) => void}>) { const [isChecked, setIsChecked] = useState(false) return <Fragment> <div> {props.name} <label htmlFor={props.name}>Selection {props.required ? '(Required)': ''}</label> <input id={props.name} type='checkbox' name={props.name} checked={isChecked} onChange={ setIsChecked(!isChecked) if(props.handleChecked) { props.handleChecked(!isChecked); } } }/> </div> </Fragment>; }Como se menciona en la sección de comentarios, debe crear un estado separado para el valor de la casilla de verificación de nombre y dirección y pasarlo al componente <Input> .
class Wrapper extends Component { state = { isNameChecked: false, isAddressChecked: false, } render() { <Input name="Name" required={true} handleChecked={(isNameChecked: boolean) => this.setState({ isNameChecked })} isChecked={this.state.isNameChecked} /> <Input name="Address" required={true} handleChecked={(isAddressChecked: boolean) => this.setState({ isAddressChecked })} isChecked={this.state.isAddressChecked} /> <Input name="Birthdate" /> } } export function Input(props: React.PropsWithChildren<{ name: string, required?: boolean, handleChecked?: (checked: boolean) => void, isChecked: boolean, }>) { return ( <div> {props.name} <label htmlFor={props.name}>Selection {props.required ? '(Required)': ''}</label> <input id={props.name} type='checkbox' name={props.name} checked={isChecked} onChange={ if (props.handleChecked) { props.handleChecked(!isChecked); } } }/> </div> ); }Puede hacer esto de diferentes maneras..
Sugeriría algo como esto:
interface State = { name: boolean; address: boolean; } class Wrapper extends Component { state: Readonly<State> = { name: false, address: false, } handleChecked = e => { setState({ [e.target.name]: e.target.checked }) } render() { <Input name="name" required handleChecked={handleChecked} /> <Input name="address" required handleChecked={handleChecked} /> } } function Child({ name, handleChecked }: { name: string; handleChecked: (e: ChangeEvent<HTMLInputElement>) => void; }) { return ( <input ... type='checkbox' name={name} onChange={handleChecked} /> ) } Entonces podría manejar las cosas según el estado de los padres.
es decir -
class Wrapper extends Component { ... foo = () => { if (state.name && state.email) { // do whatever.. } } ... }