Soy nuevo en React y trato de pasar datos (director, no director) de mi componente funcional secundario a un componente de clase principal.
Mi código está abajo, ¿qué debo hacer para que funcione?
Componente padre de clase
export default class ProfileEditor extends React.Component<IProfileEditorProps, IProfileEditorState> { constructor(props: IProfileEditorProps) { super(props); this.state = { data: null, } this.updateProfile = this.updateProfile.bind(this); } public updateProfile(director, nonDirector) { console.log('hello', director, nonDirector); } <MultiSelect options={ profile?.Declarations.length == 0 ? countries : this.combineProfileAndCountrys() } updateProfile={updateProfile()} />Componente funcional hijo
export const MultiSelect = ({ options, updateProfile }) => { const [nonDirector, setNonDirector] = React.useState(); const [director, setDirector] = React.useState(); <PrimaryButton text='Save' onClick={ updateProfile(nonDirector, director) } /> </Fragment> );En su componente principal, no debería llamar a la función en el controlador onClick . En su lugar, desea pasarle la referencia a la función.
updateProfile={updateProfile} Un problema similar está ocurriendo en su componente secundario. No desea llamar a la función y devolver los resultados al controlador, desea asignar una función al controlador que luego puede llamar a la función updateProfile cuando se activa.
onClick={() => updateProfile(nonDirector, director)}