添加事件处理器

你已经安装了 Slate 并且在页面上渲染了出来。并且当你输入的时候，会看到发生的变化。但是你一定希望做更多而不是仅仅输入一些纯文本。

Slate 很棒的原因是你可以如此轻松地去定制它。就像是在其它 React 组件中你曾经那样做的一样，当某些事件触发的时候 Slate 允许你传递事件处理程序。

当我们按下按键时候，让我们使用 onKeyDown 事件去改变编辑器的内容。

这是我们之前的app:

  1. const App = () => {
  2.   const editor = useMemo(() => withReact(createEditor()), [])
  3.   const [value, setValue] = useState([
  4.     {
  5.       type: 'paragraph',
  6.       children: [{ text: 'A line of text in a paragraph.' }],
  7.     },
  8.   ])
  10.   return (
  11.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  12.       <Editable />
  13.     </Slate>
  14.   )
  15. }

现在让我们添加一个 onKeyDown 处理程序:

  1. const App = () => {
  2.   const editor = useMemo(() => withReact(createEditor()), [])
  3.   const [value, setValue] = useState([
  4.     {
  5.       type: 'paragraph',
  6.       children: [{ text: 'A line of text in a paragraph.' }],
  7.     },
  8.   ])
  10.   return (
  11.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  12.       <Editable
  13.         // 定义一个新的处理程序在控制台打印按下的键
  14.         onKeyDown={event => {
  15.           console.log(event.key)
  16.         }}
  17.       />
  18.     </Slate>
  19.   )
  20. }

非常棒！现在当我们在编辑器中按下按键，它相应的 keyCode 会被打印到控制台中。

现在我们想要让它实际上去改变内容。就我们的示例而言，让我们实现在输入时将所有的 & 转换为 and 。

我们的 onKeyDown 事件处理程序可能会是这个样子:

  1. const App = () => {
  2.   const editor = useMemo(() => withReact(createEditor()), [])
  3.   const [value, setValue] = useState([
  4.     {
  5.       type: 'paragraph',
  6.       children: [{ text: 'A line of text in a paragraph.' }],
  7.     },
  8.   ])
  10.   return (
  11.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  12.       <Editable
  13.         onKeyDown={event => {
  14.           if (event.key === '&') {
  15.             // 阻止插入 `&` 字符的默认事件
  16.             event.preventDefault()
  17.             // 执行 insertText 方法插入某些文本
  18.             editor.insertText("and")
  19.           }
  20.         }}
  21.       />
  22.     </Slate>
  23.   )
  24. }

添加完成后，试着输入 & ，你会发现它突然变成了插入 and ！

这个示例展示了 Slate 的事件处理程序可以做到什么。editor 可以让你运行命令去执行所有的 event 对象。就是这么简单！