Блог

Я новичок в том, чтобы реагировать и пытаться передавать данные (директор, недиректор) из моего дочернего функционального компонента в компонент родительского класса.

Мой код приведен ниже, что мне нужно сделать, чтобы он работал?

Родительский компонент класса

 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()}
      />
 

Детский функциональный компонент

 export const MultiSelect = ({ options, updateProfile }) => { 

const [nonDirector, setNonDirector] = React.useState();
const [director, setDirector] = React.useState();

<PrimaryButton text='Save' onClick={ updateProfile(nonDirector, director) } />
    </Fragment>
);
 

В вашем родительском компоненте вы не должны вызывать функцию в onClick обработчике. Вместо этого вы хотите передать ему ссылку на функцию.

 updateProfile={updateProfile}
 

Аналогичная проблема возникает в вашем дочернем компоненте. Вы не хотите вызывать функцию и возвращать ее результаты обработчику, вы хотите назначить обработчику функцию, которая затем может вызвать updateProfile функцию при ее срабатывании.

 onClick={() => updateProfile(nonDirector, director)}