How to bind theia “FileDialogService” to React button onclick event

Hi, I’m new to theia, I want to create a button for open file,but get it “this.FileDialogService is undefined”, this is my code, how can I solve it?

import { FileDialogService } from '@theia/filesystem/lib/browser/file-dialog/file-dialog-service';

export class CustomDialog extends ReactDialog<CreateAPProject> {
    @inject(FileDialogService) fileDialogService: FileDialogService;

    protected async onClick(): Promise<void> {
      const uri = await this.fileDialogService.showOpenDialog({
          title: 'select File',
          canSelectFiles: false,
          canSelectFolders: true,
          openLabel: 'select',

      console.log('select', uri);
    return <div>
<button onClick={() => this.onClick()} >Import</button>

@Kevin thank you for the discussion, it is a little difficult to help with only a subset of the code, but I pushed an example on GitHub if you’d like to take a look (GitHub - vince-fugnitto/custom-dialog).

You can use the command hello world dialog to test the changes (confirmed that the button renders and it triggers the file-dialog).

1 Like

You are the sweetest,thank you very much,this solved my problem