Ajout de gestionnaires d’événements

d’accord, vous avez installé slate et il est rendu sur la page, et lorsque vous y tapez, vous voyez les changements reflétés mais vous voulez faire plus que simplement saisir une chaîne de texte brut ce qui rend slate excellent est la facilité avec laquelle il peut être personnalisé comme avec d’autres composants react auxquels vous êtes habitué, slate vous permet de transmettre des handlers déclenchés lors de certains événements utilisons le handler onkeydown pour modifier le contenu de l’éditeur lorsque nous appuyons sur une touche voici notre application d’avant const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor} value={initialvalue}> \<editable /> \</slate> ) } nous ajoutons maintenant un handler onkeydown const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor} value={initialvalue}> \<editable // define a new handler which prints the key that was pressed onkeydown={event => { console log(event key) }} /> \</slate> ) } super, maintenant lorsqu’une touche est pressée dans l’éditeur, son keycode correspondant est enregistré dans la console nous voulons maintenant faire en sorte que cela modifie réellement le contenu dans le cadre de notre exemple, implémentons la transformation de chaque frappe du caractère esperluette, & , en le mot et lorsqu’il est tapé notre handler onkeydown pourrait ressembler à ceci const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor} value={initialvalue}> \<editable onkeydown={event => { if (event key === '&') { // prevent the ampersand character from being inserted event preventdefault() // execute the `inserttext` method when the event occurs editor inserttext('and') } }} /> \</slate> ) } avec cela ajouté, essayez de taper & , et vous devriez le voir devenir soudainement et à la place ! cela donne une idée de ce qui peut être fait avec les event handlers de slate chacun sera appelé avec l’objet événement , et vous pouvez utiliser votre éditeur pour exécuter des commandes en réponse simple !