Mam moja aplikacje React w ktorej istnieje przycisk z nastepujaca akcja:
let linkEditor = new LinkEditor({
view: view,
href: "",
title: "",
validateLink: null,
});
linkEditor.render();
showModal(document.querySelector("#modal-base") as HTMLElement);
gdzie LinkEditor
uzyaw portalu jak nizej:
export class LinkEditor extends React.Component {
hrefInput: HTMLInputElement | null = null;
textInput: HTMLInputElement | null = null;
saveBtn: HTMLButtonElement | null = null;
hrefError: HTMLParagraphElement | null = null;
view: EditorView | null = null;
title: string = "";
href: string = "";
validateLink: any;
constructor(props: Props) {
super(props);
this.validateLink = props.validateLink;
this.view = props.view;
this.title = props.title;
this.href = props.href;
}
render(): React.ReactNode {
let editor = (
<form className="mt6 bt bb bc-black-400 js-link-editor">
<div className="d-flex fd-column gsy gs8 p12">
<div className="flex--item">
<label htmlFor="link-editor-href-input" className="s-label mb4">
{_t("link_editor.href_label")}
</label>
<input
id="link-editor-href-input"
className="s-input js-link-editor-href"
type="text"
name="href"
value={this.href}
aria-describedby="link-editor-href-error"
ref={(c) => (this.hrefInput = c)}
/>
<p
id="link-editor-href-error"
className="s-input-message mt4 d-none js-link-editor-href-error"
ref={(c) => (this.hrefError = c)}
></p>
</div>
<div className="flex--item">
<label htmlFor="link-editor-text-input" className="s-label mb4">
{_t("link_editor.text_label")}
</label>
<input
id="link-text-href-input"
className="s-input js-link-editor-text"
type="text"
value={this.title}
name="text"
ref={(c) => (this.textInput = c)}
/>
</div>
<div className="flex--item">
<button
className="s-btn s-btn__primary js-link-editor-save-btn"
type="submit"
disabled
ref={(c) => (this.saveBtn = c)}
>
${_t("link_editor.save_button")}
</button>
<button className="s-btn" type="reset">
${_t("link_editor.cancel_button")}
</button>
</div>
</div>
</form>
);
return ReactDOM.createPortal(
editor,
document.getElementById("link-editor")!
);
}
Myślałem ze jak wywołam render()
to formularz z klasy LinkEditor
zostanie wyrenderowany wewnątrz już istniejącego divu z id link-editor
(jak wskazuje portal i najlepiej bez re-renderowania całej aplikacji) ale nic takiego się nie dzieje. Co powinienem zmienić, żeby przed wywolaniem showModal
, wygenerować ta zawartość z linkEditor
a zeby po prostu moc ja wyswietlic w moim modalu?