网站开发用什么网站,网站热点关键词,中国智力技术合作公司官网,海南省住房和城市建设厅网站我们接着上一节的示例内容#xff0c;现在有如下需求#xff0c;我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能onKeyDown, 我们给 Editor添加事件#xff1a;
SDocor.jsx
import { useState } from react;
import { createEditor } from…我们接着上一节的示例内容现在有如下需求我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能onKeyDown, 我们给 Editor添加事件
SDocor.jsx
import { useState } from react;
import { createEditor } from slate;
import { Slate, withReact, Editable } from slate-react;import { initialValue } from ./_configure;function SDocer() {const [editor] useState(() withReact(createEditor()));return (Slate editor{editor} initialValue{initialValue}EditableonKeyDown{event {console.log(event.key)}}//Slate)
}export default SDocer;现在看控制台的打印结果能捕获到每一次的按键值。当然这肯定不是我们想要的我们想要的是有一个实用的功能。比如当按下 键时在文本中插入 and单词。修改如下
SDocer.jsx
import { useState } from react;
import { createEditor } from slate;
import { Slate, withReact, Editable } from slate-react;import { initialValue } from ./_configure;function SDocer() {const [editor] useState(() withReact(createEditor()));return (Slate editor{editor} initialValue{initialValue}EditableonKeyDown{event {console.log(event.key)if (event.key ) {event.preventDefault()editor.insertText(and)}}}//Slate)
}export default SDocer;当我们键入 时就能看到界面上的变化了。有点意思是不是。
