Ajouter des gestionnaires d'événements

d'accord, donc vous avez slate installé et rendu sur la page, et quand vous tapez dedans, vous pouvez voir les changements reflétés mais vous voulez faire plus que simplement taper une chaîne de texte brut ce qui rend slate génial, c'est à quel point il est facile à personnaliser tout comme d'autres composants react auxquels vous êtes habitué, slate vous permet de passer des gestionnaires qui sont déclenchés sur certains événements utilisons le onkeydown gestionnaire pour changer le contenu de l'éditeur lorsque nous appuyons sur une touche voici notre application d'avant const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable /> \</slate> ) } maintenant, nous ajoutons un onkeydown gestionnaire const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable // define a new handler which prints the key that was pressed onkeydown={event => { console log(event key) }} /> \</slate> ) } cool, maintenant quand une touche est pressée dans l'éditeur, son code de touche correspondant est enregistré dans la console maintenant, nous voulons vraiment changer le contenu pour les besoins de notre exemple, implémentons la transformation de tous les caractères ampersand, & , en le remplaçant par le mot et lorsqu'il est tapé notre onkeydown gestionnaire pourrait ressembler à ceci const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<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 gestionnaires d'événements 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 !