draftjs - Draft.js 中列表的处理选项卡

Question

我有一个由 Draft.js 提供的编辑器的包装器，我想让 tab/shift-tab 键像它们应该为 UL 和 OL 一样工作。我定义了以下方法：

  _onChange(editorState) {
    this.setState({editorState});
    if (this.props.onChange) {
      this.props.onChange(
        new CustomEvent('chimpeditor_update',
          {
            detail: stateToHTML(editorState.getCurrentContent())
          })
      );
    }
  }

  _onTab(event) {
    console.log('onTab');
    this._onChange(RichUtils.onTab(event, this.state.editorState, 6));
  }

在这里，我有一个方法，_onTab它连接到Editor.onTab我调用RichUtil.onTab()的 ，我假设它返回 updated EditorState，然后我将它传递给更新 EditorState 并调用一些回调的通用方法。但是，当我点击 tab 或 shift-tab 时，什么也没有发生。

Answer 1

所以这是在使用 React Hooks 实现时出现的，谷歌搜索得到了这个答案作为 #2 结果。

我相信 OP 的代码是正确的，我也看到“没有发生任何事情”。问题原来不包括 Draft.css 样式。

import 'draft-js/dist/Draft.css'

Answer 2

import { Editor, RichUtils, getDefaultKeyBinding } from 'draft-js'


handleEditorChange = editorState => this.setState({ editorState })

handleKeyBindings = e => {
  const { editorState } = this.state
  if (e.keyCode === 9) {
    const newEditorState = RichUtils.onTab(e, editorState, 6 /* maxDepth */)
    if (newEditorState !== editorState) {
       this.handleEditorChange(newEditorState)
    }

    return
  }

  return getDefaultKeyBinding(e)
}

render() {
  return <Editor onTab={this.handleKeyBindings} />
}