Tengo un componente principal y uno secundario, quiero pasar el estado (compartir) del componente secundario al principal en los accesorios (está marcado), ¿cómo se puede hacer esto?
export class Form extends React.Component<FormProps, { ..., isChecked?: boolean}> { constructor(props: FormProps) { super(props); this.state = { ..., isChecked:false }; private checkField = () => { const checked = this.state.isChecked console.log('check '+checked) } render() { } return <div><Input name="Name" required={true} isChecked={this.state.isChecked}></div> } export function Input(props: React.PropsWithChildren<{name: string, required?: boolean, isChecked?:boolean}>) { const [share, setShare] = useState(false); return <Fragment> <div> {props.name} <span onClick={(event) => {setShare(!share);props.isChecked = share;}}>Selection {props.required ? '(Required)': ''}</span> </div> <div className="btn btn--dark btn--margin-left" onClick= {this.checkField}> Verify</div> </Fragment>; }Para la interacción de niño a padre, debe pasar una función como accesorio al niño desde el padre.
export class Form extends React.Component<FormProps, { ..., isChecked?: boolean}> { constructor(props: FormProps) { super(props); this.state = { ..., isChecked:false }; render() { return <div> <Input name="Name" required={true} isChecked={this.state.isChecked} handleChecked={ (isChecked: boolean) => this.setState({isChecked}) } /> </div> } export function Input(props: React.PropsWithChildren<{name: string, required?: boolean, isChecked?:boolean, handleChecked?: (isChecked: boolean) => void}>) { const [share, setShare] = useState(false); return <Fragment> <div> {props.name} <span onClick={ (event) => { setShare(!share); if(handleChecked) {props.handleChecked(share);} }}>Selection {props.required ? '(Required)': ''}</span> </div> </Fragment>; }Supongo que desea usar share en su componente principal y, si ese es el caso, debe establecer el estado en el elemento principal y pasárselo a su hijo como accesorio, tal como lo hizo con isChecked .
Muy fácil de hacer, solo necesita pasar un accesorio handleChange a su componente secundario desde el componente principal y luego utilizarlo en el componente secundario.
Echa un vistazo a este código-sandbox