javascript - I SlateJS, hvordan endre fokus til en spesifikk editor når flere editorer er til stede?
Jeg har flere SlateJS-redaktører i appen min, som representerer individuelle sider. Når jeg legger til en ny side, vil jeg at fokuset skal flyttes til redaktøren på den siden.
Jeg har ingen idé om hvordan jeg skal gjøre dette! Jeg har sjekket i dokumentasjonen, og det finnes onFocus og onBlur hook-plugins, men dette er for å reagere på fokusendringer. På Slack-fellesskapets utdrag finnes dette:
// Moving cursor to the end of the document
ReactEditor.focus(editor);
Transforms.select(editor, Editor.end(editor, []));
Men jeg får ikke dette til å fungere heller. Dette er en nedstrippet versjon av koden min:
Rot-element
<div>
{pages.map((pageID: number) => (
<Page onChange={updatePage(pageID)}/>
))}
</div>
Sideelement
<div>
<Input onChange={onChange}/>
</div>
Og deretter rendrer <Input/>-elementet Slate- og Editable-komponentene fra slate-react.
Jeg har prøvd å lese manualen, men jeg kan ærlig talt ikke finne noe om å håndtere fokus bortsett fra den plugins-siden.
Jeg har prøvd å legge til en focusOnRender boolsk prop, og bruke den som en hook på Input-elementet:
useEffect(() => {
if (focusOnRender)
ReactEditor.focus(editor);
}, [focusOnRender]);
Men dette fungerer bare ikke for meg.
Jeg har funnet denne siden i dokumentasjonen som beskriver en editor.focus()-funksjon, men når jeg prøver dette får jeg følgende feil:
TypeError: editor.focus is not a function
Svar #1
Ikke sikker på om dette hjelper, men jeg har hatt litt suksess med å pakke inn ReactEditor.focus(editor) i en setTimeout(). Jeg gjør dette utenfor komponenttreet (f.eks. i stedet for å legge det i useEffect i en komponent, prøv å legge det i en hendelseshåndterer, eller kalle det fra konsollen).
Til orientering, dokumentasjonen for editor.focus() som du refererer til, er for Slate 0.47, og API-en har endret seg betydelig i 0.50+ (hvis du bruker Transforms.select eller ReactEditor.focus API-en, er du på versjon 0.50+)